dom元素样式

控制dom元素的类样式

className：获取或设置元素的类名
classList： dom4的新属性，是一个用于控制元素类名的对象
- add：用于添加一个类名
- remove：用于移除一个类名
- contains：用于判断一个类名是否存在
- toggle：用于添加/移除一个类名

dom.classList.to("red"); //有的话就移除red 没有的话就添加red

获取样式

CSS的短横线命名，需要转换为小驼峰命名

dom.style：得到行内样式对象
window.getComputedStyle(dom元素)：得到某个元素最终计算的样式
- 可以有第二个参数，用于得到某个元素的某个伪元素样式
  获取尽量获取到准确的书属性，避免获取速写属性

getComputedStyle(dom, "before"); //得到该元素的为元素的样式

设置样式

dom.style.样式名 = 值

设置的是行内样式。

练习

选中效果.html随机背景色.html放大缩小.html扑克牌.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        header {
            width: 100%;
            background: #333;
            color: #eee;
        }

        nav {
            overflow: hidden;
        }

        span {
            float: left;
            line-height: 50px;
            margin: 0 15px;
            cursor: pointer;
        }

        span.active {
            color: gold;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <span>Lorem.</span>
            <span>Explicabo.</span>
            <span>Harum?</span>
            <span>Delectus?</span>
            <span>Commodi.</span>
            <span>Ullam!</span>
            <span>Tempora!</span>
        </nav>
    </header>

    <script>
        var spans = document.getElementsByTagName("span");
        Array.from(spans).forEach(function(sp) {
            sp.onclick = function(){
                //去掉之前的所有具有active的类样式
                var span = document.querySelector("span.active");
                if(span){
                    span.classList.remove("active");
                }
                this.classList.add("active");
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 2px solid;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <p>
        点击div，设置div的背景色为随机颜色
    </p>
    <div class="container">

    </div>
    <script src="../../common/BetterFunction.js"></script>
    <script>
        var div = document.querySelector(".container");
        div.onclick = function() {
            // 0 - 255
            this.style.background = `rgb(${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)})`;
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
            border: 2px solid;
            width: 200px;
            height: 200px;
            position: relative;
            line-height: 200px;
            text-align: center;
            font-size: 100px;
            font-family: 宋体;
        }
    </style>
</head>

<body>
    <div class="container">
        袁
    </div>
    <p>
        <button id="btnbig">放大</button>
        <button id="btnsmall">缩小</button>
    </p>

    <script>
        var btnBig = document.getElementById("btnbig"),
            btnSmall = document.getElementById("btnsmall"),
            div = document.querySelector(".container");

        btnBig.onclick = function() {
            //得到当前的字体大小
            var size = parseInt(getComputedStyle(div).fontSize);
            div.style.fontSize = size + 10 + "px";
        }

        btnSmall.onclick = function() {
            //得到当前的字体大小
            var size = parseInt(getComputedStyle(div).fontSize);
            var result = size - 10;
            if (result < 10) {
                result = 10;
            }
            div.style.fontSize = result + "px";
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>
        利用pokers文件夹中的图片，用纯JS生成图片依次排列到页面上。不允许使用样式表
    </p>
    <div id="divcontainer">

    </div>

    <script>
        var div = document.getElementById("divcontainer");
        var imgs = [];
        for (var i = 1; i <= 13; i++) {
            for (var j = 1; j <= 4; j++) {
                imgs.push(createImg(`pokers/${i}_${j}.jpg`));
            }
        }
        imgs.push(createImg(`pokers/14_1.jpg`));
        imgs.push(createImg(`pokers/15_1.jpg`));
        imgs.sort(function() {
            return Math.random() - 0.5;
        });

        imgs.forEach(function(img){
            div.appendChild(img);
        });

        function createImg(src) {
            var img = document.createElement("img");
            img.src = src;
            img.style.margin = "30px";
            return img;
        }
    </script>
</body>

</html>

dom元素样式 ​

控制dom元素的类样式 ​

获取样式 ​

设置样式 ​

练习 ​

dom元素样式

控制dom元素的类样式

获取样式

设置样式

练习