JavaScript 设置CSS与注意事项

vincent_xyb 发布于2019-08-30 14:10 / 2582人阅读

摘要：设置的几种方法及注意事项设置样式直设置内联属性设置内联样式替换内联追加设置内联样式第三个参数可以省略以上中方法都是基于内联样式，用他们来获取元素的样式是同样只能获取到内联样式。

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)

完整例子代码:

GPU云服务器云服务器 javascript设置css 安全设置注意 javascript+css html css javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115827.html

JavaScript 设置CSS与注意事项

摘要：设置的几种方法及注意事项设置样式直设置内联属性设置内联样式替换内联追加设置内联样式第三个参数可以省略以上中方法都是基于内联样式，用他们来获取元素的样式是同样只能获取到内联样式。 JavaScript设置CSS的几种方法及注意事项 JS设置CSS样式直设置内联style属性 el.style.color = red; el.style[font-size] = 16px; el.s...

Jokcy 2019-08-22 15:30 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车...

ysl_unh 2019-08-21 17:30 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车...

Tecode 2019-08-01 17:58 评论0 收藏0