利用JS修改style属性和添加元素类名（important)

JS设置CSS样式的几种方式

1. 直接设置style的属性 某些情况用这个设置 !important值无效

如果属性有'-'号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

element.setAttribute('height', 100);

element.setAttribute('height', '100px');

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

4. 使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class 比如JQ的更改class相关方法

因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

7. 创建引入新的css样式文件

        function addNewStyle(newStyle) {
            var styleElement = document.getElementById('styles_js');

            if (!styleElement) {
                styleElement = document.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = 'styles_js';
                document.getElementsByTagName('head')[0].appendChild(styleElement);
            }
            
            styleElement.appendChild(document.createTextNode(newStyle));
        }

        addNewStyle('.box {height: 100px !important;}');

1、添加style样式

　　A、当代码中没有style元素时，可以通过document.createElement("style");建立style，然后插入到doucment.head,最后就可以成功在js中添加style了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.createElement("style");
        styleNode.innerHTML=".box1{100px;height:100px;background:red}";
        document.head.appendChild(styleNode);                
    </script>
</body>
</html>

　　以下是效果：

　　B、当代码中已经存在style元素时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.createElement("style");
        styleNode.innerHTML=".box1{100px;background:red}";
        document.head.appendChild(styleNode);                
    </script>
</body>
</html>

　按原来的方法也是可以新加style，但是这样会不太好，因为一个html文档一般只存在一个style元素，createElement会新建一个style元素，

　效果如下：

　　建议采用如下方式添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <script>
        var styleNode = document.querySelector("style");
        styleNode.innerHTML+=".box1{100px;background:red}";
        // document.head.appendChild(styleNode);                
    </script>
</body>
</html>

结果如下：

2、修改style样式

　　如果不需要新增样式，仅仅是修改已有的属性，那么可以采用以下的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <script>
        var box1=document.querySelector(".box1");
        box1.style.height="300px";            
    </script>
</body>
</html>

上述代码只是在原有的基础进行修改，不新增样式，这也是平时绝大多数使用的方式

3、添加元素class类名

　　有时候我们可以通过js添加或移除元素类名进而控制元素的样式变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 200px;
            width: 200px;
            background-color: red;
        }
        .active{
           height: 300px;
           width: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
    </div>
    <script>
        var istrue=false;
        var box1=document.querySelector(".box1");
        box1.addEventListener('click',function(){
            istrue=!istrue;
            if(istrue){
                console.log(istrue);
                box1.classList.add("active");
            }
            else{
                console.log(istrue);
                box1.classList.remove("active");
            }
        })
    </script>
</body>
</html>

　点击box就可以实现样式变化

利用这个可以实现很多交换动画