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>