利用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{width: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{width: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{width: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就可以实现样式变化

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

posted @ 2020-08-04 11:33  webpon  阅读(7746)  评论(0编辑  收藏  举报