在FF上使用本机Javascript进行样式属性操作

Style Attribute Manipulation wiht native Javascript on FF

本文关键字:样式 属性 操作 Javascript 本机 FF      更新时间:2023-09-26

我试图找到一个相关的问题,但找不到任何听起来相似的东西。

我正在为我们公司的多个项目构建一个小的javascript Slider插件。因此,我需要对DOM中的某些元素进行基本的样式操作。我在当前的Chrome + ChromeOnAndroid,Safari + SafariIOS,Opera + OperaMobile上对此进行了测试。当我尝试在 Firefox 上执行此操作时,似乎根本没有触及 Style 属性:这是代码(或小提琴(:

// the html
<div id="testwrapper">
</div>
// the javascript
(function(){
    var extend = function(source, additions) {
        for (var addition in additions) {
            source[addition] = additions[addition];
        }
    };
    var testEl = document.getElementById('testwrapper');
    var testStyles = {
        width: '150px',
        height: '150px',
        padding: '5px',
        margin: '5px'
    };
    window.setTimeout(function(){
        extend(testEl.style, testStyles);
    }, 15000)
}());

很明显,我想要完成什么。我采用元素具有的样式属性,并尝试通过我在testStyles中给出的属性来扩展它们。这对我来说似乎非常简单,然后写下我想以这种方式更改的所有属性要容易得多:

testEl.style.width = 'Xpx';
testEl.style.height = 'Ypx';
// and so on

这样它将在 ff 中工作,但是..这会炸毁我的代码,因为我会有不同的条件,因为某些属性可能会改变,而有些属性可能不会。

所以问题来了:
有没有办法在 Firefox 中获得与 Chrome 等相同的结果,还是我做错了什么。FF是否支持这种操纵样式属性的方式?

感谢您的帮助。

PS:我不需要任何人告诉我使用jQuery。请记住这一点。

因为对象是通过引用传递的,所以你不需要return source;,也不需要testEl.style =。尝试删除这两件事,看看是否可以解决Firefox中的问题 - 它可能不喜欢您完全重新分配style对象;)