SetAttribute is not working for 'style' attribute on IE

Asked
Active3 hr before
Viewed126 times

7 Answers

attributeworking
90%

I noticed that setAttribute works in IE only when the attribute does not already exist. Therefore, use remove attribute and then use set attribute.,Thanks for contributing an answer to Stack Overflow!,getAttribute and setAttribute are broken in Internet Explorer. , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

Because style itself is an object. What you want is:

button.style.setAttribute('cssFloat', 'right');

But IE doesn't support setAttribute for style objects. So use the fully cross-browser supported:

button.style.cssFloat = 'right';

And finally, to set multiple attributes I usually use something like:

function setStyle(el, spec) {
   for (var n in spec) {
      el.style[n] = spec[n];
   }
}

usage:

setStyle(button, {
   cssFloat: 'right',
   border: '2px solid black'
});
load more v
88%

I'm porting a piece of JS code written for Firefox into Internet Explorer. I faced a problem of changing style of an element using setAttribute method which was working on Firefox.,I tried setting the style member of button and it didn't work either. This was the solution in case of setting onclick event handler.,getAttribute and setAttribute are broken in Internet Explorer. ,NOTE - this was written to exist inside object that had property called 'element'.

I'm porting a piece of JS code written for Firefox into Internet Explorer. I faced a problem of changing style of an element using setAttribute method which was working on Firefox.

button.setAttribute('style', 'float: right;');

I tried setting the style member of button and it didn't work either. This was the solution in case of setting onclick event handler.

button.style = 'float: right;';
load more v
72%

im not arguing that you cant set a style property:,in FF, this code works fine. why won't it work in IE?,If you can call setAttribute then surely you can set a style property,Yes, but aaron.martinas does not asked that ...

in FF, this code works fine. why won't it work in IE?

<table cellpadding=0 cellspacing=0 border>
   <tr>
      <td id="test">BLAH BLAH BLATHERY
      </td>
   </tr>
</table>

<div onclick="document.getElementById('test').setAttribute('bgcolor','red')">click to fail in IE</div>

<div onclick="document.getElementById('test').setAttribute('style','background-color: red;')">click to fail AGAIN in IE</div>
load more v
65%

After clicking on the button, when I inspect the source (ctrl+u) in Firefox, the name attribute is still set to “niceButton” instead of “helloButton.” What am I missing? Cheers in advance for yourtime. ,Assuming you are still calling the buttonChange() function, the console.log should certainly print something out.,Well if the alert is showing then you might be selecting the wrong button… are there by chance multiple buttons on your page? .querySelector() will only return the first match…,That latest snippet of yours actually works for me too, although it changes the attribute of the “get node tag” button (which it also logs to the console). Maybe try to debug the relevant code in isolation first to rule out other effects…

I’m trying to experiment with this tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
and when I incorporate this code:

<button name="niceButton" onclick="buttonChange()">Hello World</button>
                <script>
                    function buttonChange() {
                    alert("in buttonChange");
                    var b = document.querySelector("button");

                    b.setAttribute("name", "helloButton");
                    b.setAttribute("disabled", "");
                    }
                </script>
load more v
75%

Try using cssText for ie.Element.style.setAttribute('cssText', 'left:150px;.........you could create function if you wanted.,First I created a function to would take "font-weight:bold;..." as input and convert that to "element.style.fontWeight='bold'" etc:,This is how it works in IEoImg.style.cssText="float:left;margin-right:7px;margin-bottom:7px"; ,That worked in Firefox of course but not in IE. The reason is that apparently IE doesn't support this. This brilliant page says that IE is "incomplete" on setAttribute(). Microsoft sucked again! Let's now focus on the workaround I put in place.

var closer = document.createElement('a');
a.setAttribute('style', 'float:left; font-weight:bold');
a.onclick = function() {
      ...
load more v
40%

Report a problem with this content on GitHub,DOM methods dealing with element's attributes:, Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value. ,Want to fix the problem yourself? See our Contribution guide.

Element.setAttribute(name, value);
load more v
22%

document.getElementById(...).setAttribute('style',... is not working in Internet Explorer 7.0. How can I make this work in Internet Explorer?,The HTML5 main element is not supported by Internet Explorer (see browser support data).,Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).,Note that I have tried to define a vararg version (log taking multiple parameters) but I couldn't get this to work correctly across the framework api.

document.getElementById(...).setAttribute('style',... is not working in Internet Explorer 7.0. How can I make this work in Internet Explorer?

<!DOCTYPE html> 
<html lang="en"> 

<head>
<script type="text/javascript">
    var myarray=new Array(3);
    for (i=0; i <1000; i++){
        myarray[i]=new Array(3);
    }
    myarray[0][0]="new"; myarray[0][1]="old";

    function swapText(id){
        document.getElementById('id' + id).setAttribute('style', 'font-weight: bold; color: red; font-size:150%;');
        document.getElementById('id'+ id).innerHTML = myarray[id][0];
    }
    function originalText(id){
        document.getElementById('id' + id).setAttribute('style', 'color:' + 'black'  + ';');
        document.getElementById('id' + id).innerHTML = myarray[id][1];
    }
</script>
</head>
<body>
    <div id="scoreboard" border='1'> </div>
    <div id="qa">
        <div id="col1" class="column">  
            <div id="id0" onmouseover="swapText(0)"; onmouseout="originalText(0)">old</div>
        </div>
    </div>
</body>
</html>
load more v

Other "attribute-working" queries related to "SetAttribute is not working for 'style' attribute on IE"