我有一个对象dom
,它有一个名为changeCss
的属性,可以更改任何元素的css:代码如下:
var Dom = {
changeCss : function(element, properties){
if(typeof (properties) === "object"){
var properties_name = Object.keys(properties),
properties_value = [];
for ( var i = 0; i < properties_name.length ; i++ ){
var a = properties_name[i],
b = properties[a];
properties_value[i] = b;
element.setAttribute("style", a+":" + b+";");
};
}else{
throw 'properties of '+ element +" should be object";
}
},
}
所以从这段代码中你将会理解我是如何改变任何元素的css的,这是完美的。但我面临的问题是,如果我正在编写这段代码:
var x = document.getElementById("some_html_tag_id");
Dom.changeCss(x, {"width": "100px", "height":"80px"});
那么样式元素只包含height:80px
而不是width:100px
!如何添加所有这些样式属性?
感谢
anni
答案 0 :(得分:3)
首先替换
element.setAttribute
与
element.style[a]= b;
但基本上你应该明白你的意思。 SetAttribute函数设置属性样式的新值。 所以 而我= = 0 风格=&#39;宽度:100像素;&#39; 而我== 1 style =&#39; height:80px;&#39;
因为你只是覆盖了价值。如果要在代码中保留SetAttribute函数。您需要先连接所有值,然后使用set attribute
答案 1 :(得分:1)
在DOM中。 style
属性不是字符串。它是一个对象。这意味着你应该这样做:
element.style.setProperty(a,b);
但是,旧版本的IE不支持setProperty
样式对象。因此,即使上述技术上符合标准的方式,有效的保证跨行方法是:
element.style[a] = b;
请注意,对于您认为需要setProperty
或setAttribute
的每个实例,object[x] = y
语法也适用,并且在样式的情况下始终向后兼容(更不用说要求少输入)。