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>
