JavaScript 设置CSS与注意事项

最新推荐文章于 2024-02-22 14:36:28 发布

weixin_34120274

最新推荐文章于 2024-02-22 14:36:28 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013811833

版权

JavaScript设置CSS的几种方法及注意事项

JS设置CSS样式

直设置内联style属性

el.style.color = 'red';
el.style['font-size'] = '16px';
el.style.fontSize = '16px';

cssText设置内联样式

el.style.cssText = 'color: red'; //替换内联css
el.style.cssText += 'color: red' //追加

setProperty设置内联样式

el.style.setProperty('color', 'red', '!important'); //第三个参数可 以省略

以上3中方法都是基于内联样式，用他们来获取Dom元素的样式是同样只能获取到内联样式。

addRule、insertRule
二者区别 ,addRule：在原有css规则中加入样式; insertRule:

   document.styleSheets[0].addRule('.class', 'color: red');
   document.styleSheets[0].insertRule('.class{color: red}', 0);  //参数：rules，index（cssRules 数组中的位置）

注意事项

先看下面这段代码：预期执行结果是第三行不有出现过度效果，但实际还是上出现了过度效果

let con = document.getElementsByClassName('container')[0];
con.style.transitionDuration = '0s';
con.style.transform = 'translateX(0)';
con.style.transitionDuration = '.2s';

这是来自轮播图功能中的代码段，目的是为了从最后一张图跳到第一张图时不显示过渡动画。
为了找到是什么原因接下来打上debuger看看调试的情况：

function prev(offsetWidth) {
        if(con.style.transform == maxWidth){
            // 开始
            debugger;     
            con.style.transitionDuration = '0s';
            // 运行到此处：样式transition-during没有被渲染到DOM上
            con.style.transform = 'translateX(0)';
            // 运行到此处：样式transition-during、translateX都没有被渲染到DOM上
            initWidth = -600;
            offsetWidth = initWidth;
            con.style.transitionDuration = '.2s';
            // 运行到此处：样式transition-during、translateX都没有被渲染到DOM上
        }
        setTimeout(function () {
            // 运行到此处：样式transition-during、translateX都没有被渲染到DOM上，且transition-during：.2s
            con.style.transform = 'translateX('+offsetWidth+'px)';
        },2);
    }


原来浏览器为了优化会将css操作当一起执行相同的元素上属性的样式会被覆盖，也就是上面这个例子中con.style.transitionDuration = '0s';这句被覆盖了，但是如果你在这句之后将加上一句console.log(con.style.transitionDuration)是可以获取到0s的，所以只是浏览器没有渲染出来而已，并不是没有执行。
为了处理这个现象可以给这句加上延迟 
    setTimeout(function () {
            con.style.transitionDuration = '.2s';
        },1)

完整例子代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #carousel{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            overflow: hidden;
        }
        .container{
            transition-duration: .2s;
        }
        .container{
            transform: translateX(-600px);
        }
        .container>div{
            width: 600px;
            height: 400px;
            vertical-align: middle;
            text-align: center;
            border: 1px solid blue;
            box-sizing: border-box;
            line-height: 398px;
            font-size: 32px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <div class="container">
            <!--第一张为了过度-->
            <div>5</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
<script>
    let carousel = document.getElementById('carousel');
    let imgWidth = carousel.offsetWidth;
    let conWidth = imgWidth * 6 + 'px';     //总宽度
    let con = document.getElementsByClassName('container')[0];
    let initWidth = -600;   //初始位置
    let maxWidth = 'translateX('+initWidth*5+'px)';
    con.style.width = conWidth;
    function prev(offsetWidth) {
        if(con.style.transform == maxWidth){
            // debugger;
            con.style.transitionDuration = '0s';
            con.style.transform = 'translateX(0)';
            initWidth = -600;
            offsetWidth = initWidth;
            // con.style.transitionDuration = '.2s';
            setTimeout(function () {
                con.style.transitionDuration = '.2s';
            },1)
        }
        setTimeout(function () {
            con.style.transform = 'translateX('+offsetWidth+'px)';
        },2);
    }

    let play = setInterval(function () {
        initWidth -=600;
        prev(initWidth);
    },1000);
</script>
</html>