在FF上使用本机Javascript进行样式属性操作
Style Attribute Manipulation wiht native Javascript on FF
我试图找到一个相关的问题,但找不到任何听起来相似的东西。
我正在为我们公司的多个项目构建一个小的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
对象;)
相关文章:
- 通过jQuery添加ng样式属性,angular不更新
- CSS样式属性留空
- d3.js圆的半径是否可以由样式属性指定
- 如何通过JQuery修改样式属性
- 为什么样式属性不适用于使用DOMParser创建的元素
- 使用 jQuery 获取样式属性值
- 如何让firefox使用style['attribute name']=设置样式属性
- Javascript未返回样式属性
- 如何使主体采用等同于 style=“background-color: returnBlue()” 的样式属性,其中 r
- 如何在javascript中获取样式属性的初始值
- javascript正则表达式,用于编辑元素内部的css样式属性
- 如何删除样式属性
- 使用 javascript 设置表行的样式属性
- Pre 标记似乎忽略了样式属性(例如 display:none)
- DOM 元素上的空样式属性:JavaScript
- 使用父标签中的样式属性附加新标签
- Jquery-查找具有给定样式属性的元素
- 样式属性上的JS语法
- 如何在IE9剥离样式属性值之前获取该值
- 为什么浏览器在此样式属性中插入“9”