在javascript中通过数组列表改变css的值

Change css value by arraylist in javascript

本文关键字：列表 改变 css 的值 数组 javascript      更新时间：2023-09-26

我想通过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属性对我来说似乎真的没有必要:(

相关文章：