为什么javascript函数无法正常运行

时间:2014-07-17 08:01:49

标签: javascript html css

我有一个对象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

2 个答案:

答案 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;

请注意,对于您认为需要setPropertysetAttribute的每个实例,object[x] = y语法也适用,并且在样式的情况下始终向后兼容(更不用说要求少输入)。