我想通过JavaScript改变我的css样式,就像我改变transform: rotateZ(120deg)
;
<script>
var Rotate = ['90deg','120deg','150deg','180deg','210deg','240deg','90deg','120deg','150deg','180deg','210deg','240deg'];
function Time() {
var marg, d, hour;
marg = document.getElementById("hand");
d = new Date();
hour = d.getHours();
for(i = 0; i < 12; i++) {
if(hour == i) {
var x=Rotate[i];
alert(x);
marg.style.transform= "rotateZ(x)";
}
}
}
</script>
alert(x)
工作,但transform
不工作。是否有任何方法使用数组列表来改变transform
值?
您正在使用"rotateZ(x)"。这里x
不是这个脚本的变量,因为您将它写成字符串。变量必须写在"
之外。
像这样使用
var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg'];
function Time() {
var marg, d, hour;
marg = document.getElementById("hand");
d = new Date();
hour = d.getHours();
for (i = 0; i < 12; i++) {
if (hour == i) {
var x = Rotate[i];
alert(x);
marg.style.transform = "rotateZ("+x+")";
}
}
"rotateZ(x)"
在代码中是一个完整的字符串。您需要将其更改为"rotateZ(" + x + ")"
以使您的代码正常工作。
你可以使用Array#forEach
来简化你的任务。
var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg'];
function Time() {
var marg, d, hour;
marg = document.getElementById("hand");
d = new Date();
hour = d.getHours();
Rotate.forEach(function(v, i) {
if (hour == i) {
alert(v);
marg.style.transform = "rotateZ("+ v + ")";
}
});
}
我知道这超出了你的问题,但我认为解决问题的最佳解决方案是使用不同的css类,只改变js中的类名。
在js中摆弄css属性对我来说似乎真的没有必要:(