动态修改css的四种方法
1. 使用obj.className来修改样式表的类名function
changeStyle1() {
var
obj = document.getElementById(
"btnB"
);
obj.style.backgroundColor=
"black"
;
}
伪类hover的CSS是写在内联式里面,采用这种方法会直接在内联式里进行覆盖,导致hover无效
2.使用obj.style.cssTest来修改嵌入式的css
function
changeStyle2() {
var
obj = document.getElementById(
"btnB"
);
obj.style.cssText = " display:block;color:White;
}
3.使用obj.className来修改样式表的类名
function
changeStyle3() {
var
obj = document.getElementById(
"btnB"
);
//obj.className = "style2";
obj.setAttribute(
"class"
,
"style2"
);
}
4.使用更改外联的css文件,从而改变元素的css
<link href=
"css1.css"
rel=
"stylesheet"
type=
"text/css"
id=
"css"
/>
function
changeStyle4() {
var
obj = document.getElementById(
"css"
);
obj.setAttribute(
"href"
,
"css2.css"
);
}
CSS雪碧图帧动画
1.尽量确保雪碧图是一行或者一列,不然可能就要使用animation
2.重点在于background-position: 0(x轴) 0(Y轴) 和canvas坐标系一致
3.使用setinterval()每100毫秒,调用一次函数