使用JavaScript设置内联样式不工作

问题描述：

我一直在研究一个网站，该网站要求通过JavaScript将内联样式设置为元素。样式必须内联，因为它们需要设置的值在JavaScript中确定。到目前为止，这个代码已经在大多数浏览器工作（Gears.leftBot指元素）：使用JavaScript设置内联样式不工作

Gears.leftBot.style = "transform: rotate(20deg);";

然而，在微软的边缘，这个代码什么也不做。我甚至直接在控制台中运行这一行代码，但没有结果（能够确认它确实将Gears.leftBot识别为元素）。我能做些什么来解决这个问题？

完整的JavaScript：

var Gears = { 
    //Dependencies 
    rightTop: document.getElementById('gear-rt'), 
    rightMid: document.getElementById('gear-rm'), 
    rightBot: document.getElementById('gear-rb'), 
    leftTop: document.getElementById('gear-lt'), 
    leftBot: document.getElementById('gear-lb'), 

    init : function(){ 
     Gears.scrollAnima(); 
    }, 

    scrollAnima : function(){ 
     var pos = window.pageYOffset; 
     var bigGearDeg = pos/1.389; 
     var midGearDeg = pos * 1.2; 
     var litGearDeg = pos * 1.44; 
     Gears.rightTop.style = "transform: rotate(" + bigGearDeg + "deg);"; 
     Gears.rightMid.style = "transform: rotate(-" + midGearDeg + "deg);"; 
     Gears.rightBot.style = "transform: rotate(" + litGearDeg + "deg);"; 
     Gears.leftTop.style = "transform: rotate(" + litGearDeg + "deg);"; 
     Gears.leftBot.style = "transform: rotate(-" + bigGearDeg + "deg);"; 
     setTimeout(function(){Gears.scrollAnima()}, 15); 
    } 
}; 

Gears.init();

侧面说明，使用requestAnimationFrame代替的setTimeout – Sampson

答

尝试：

Gears.leftBot.style.transform = 'rotate(20deg)'

或：

Gears.leftBot.setAttribute('style', 'transform: rotate(20deg);')

使用JavaScript设置内联样式不工作

相关推荐