why the javascript function is not functioning properly

Question

i have a object dom which have a property named changeCss which changes the css on any element: the code is as follows:

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";  
            }   
        },  
}

so from this code you will be understand how i want to change the css of any element,and this is working perfectly. But the problem which i am facing is that if i am writing this code:

var x = document.getElementById("some_html_tag_id");
Dom.changeCss(x, {"width": "100px", "height":"80px"});

then the style element only consist height:80px not width:100px ! how to add all these style properties?

thanks

anni

Gena Moroz · Accepted Answer · 2014-07-17 08:08:00Z

3

First of all replace

element.setAttribute

with

element.style[a]= b;

But basically you should understand that YOU do. SetAttribute function set's new value to attribute style. So while i==0 style='width:100px;' while i==1 style= 'height:80px;'

because you just override value. If you want to keep SetAttribute function in your code. You need to concat all the values first, and then use set attribute

answered Jul 17, 2014 at 8:08

Gena Moroz

9545 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slebetman · Accepted Answer · 2014-07-17 08:33:30Z

1

In the DOM. The style attribute is not a string. It's an object. Which means you should do this instead:

element.style.setProperty(a,b);

However, older versions of IE doesn't support setProperty for style objects. So, even though the above is technically the standards compliant way of doing it, the guaranteed cross-borwser method that works is:

element.style[a] = b;

Note that for every instance where you think you need setProperty or setAttribute, the object[x] = y syntax will also work and in the case of styles is always backwards compliant (not to mention requires less typing).

edited Jul 17, 2014 at 8:33

answered Jul 17, 2014 at 8:06

slebetman

115k19 gold badges147 silver badges180 bronze badges

2 Comments

slebetman Over a year ago

It should work except for older versions of IE which doesn't support setAttribute for style objects.

Teemu Over a year ago

When talking about cross-browser methods, maybe it's good to mention, that FF requires camel-cased property name when using element.style[a] = ..., other browsers accept both camel-cased and hyphen form.

Collectives™ on Stack Overflow

why the javascript function is not functioning properly

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related