IE 9 setting attribute of a style via Javascript not using JQuery libraries

Question

I am trying to change the style of gridview footer's style due to change of aggregated footer alignment based on three conditions in IE9 but it just keeps on throwing me an error of undefined,my question is how can I change the style any help is appreciated:

.rgFooter, .rgFooterDiv
    {
        background: none !important;
        background-color: transparent !important;
        width: 100% !important;
        /*max-width:779px;*/
    }

To:

.rgFooter, .rgFooterDiv
    {
        background: none !important;
        background-color: transparent !important;
        width: 100% auto!important;
}

only using javascript no JQuery. I tried so far:

var mydiv = document.getElementById("mygrid").className;
mydiv.setAttribute("style", "width: 100% auto !important;  background: none !important; background-color: transparent !important;");

Thanks everyone for the help

Community · Accepted Answer · 2017-05-23 11:48:50Z

1

If you cannot use jQuery, perhaps you should just use the addClass and removeClass functions from it. You can see them re-written in pure javascript here: https://stackoverflow.com/a/14105067/1026459

The reason that your call to setAttribute is not working is because the reference you make is to the string for the element's class.

var mydiv = document.getElementById("mygrid").className;

Perhaps you should access the div like this instead:

var mydiv = document.getElementById("mygrid");

and then you will have access to setAttribute. To simply remove all classes from the div, you can always use

mydiv.removeAttribute("class");

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Feb 5, 2013 at 0:01

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

11 Comments

Pointy Over a year ago

I'm not sure you can remove the "class" attribute; it's a property of the DOM node. To clear it, the "className" property should just be set to the empty string.

Travis J Over a year ago

@Pointy - You should avoid accessing those methods. Use the setAttribute and removeAttribute methods to interface with DOM nodes. Here is a jsfiddle (jsfiddle.net/2DVAW) which shows that it does work, not sure why you have not come across that. Leaving an empty class attribute is ugly.

Pointy Over a year ago

That is simply false. I don't know where you picked that information up, but it's absolutely not the case. The DOM API is well-documented and it's perfectly OK to access DOM node properties.

Travis J Over a year ago

@Pointy - Stop leaving bad markup on the page. Which is best practice, this: <div id="d1" class>one</div> or this: <div id="d1">one</div>?

Pointy Over a year ago

Changing the DOM has absolutely nothing to do with page markup. Once the page has been parsed, the HTML is completely irrelevant. Also your fiddle does not work in IE7 or IE8.

|

codefactor · Accepted Answer · 2013-02-05 00:04:31Z

1

No need to use "!important" for inline styles. If you want to set inline styles using javascript without usage of any libraries, I would recommend something like this:

var mydiv = document.getElementById("mygrid");
mydiv.style.width = "100% auto";
mydiv.style.background = "none";
mydiv.style.backgroundColor = "transparent";

I'm guessing that you have an issue in your code

var mydiv = document.getElementById("mygrid").className; // mydiv variable is a string
mydiv.setAttribute(...); // Why would a string have "setAttribute" function?

answered Feb 5, 2013 at 0:04

codefactor

1,6663 gold badges19 silver badges41 bronze badges

Comments

Guffa · Accepted Answer · 2013-02-05 00:01:53Z

0

The className property returns a string, not an object that you can use to access the element. Just remove that:

var mydiv = document.getElementById("mygrid");

answered Feb 5, 2013 at 0:01

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Pointy · Accepted Answer · 2013-02-05 00:01:58Z

0

First, you don't want to access the "className" property of your element; you just need the element.

var mydiv = document.getElementById("mygrid");

Then, you should set the individual properties of the style object:

mydiv.style.width = '100%';
mydiv.style.backgroundColor = 'transparent';

and so on. If you want to get rid of all classes, you can do this:

mydiv.className = '';

answered Feb 5, 2013 at 0:01

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Developer · Accepted Answer · 2013-02-05 00:38:59Z

0

Added another css:

.rgmine
    {
        background: none !important;
        background-color: transparent !important;
        width: auto !important;       
    }

then changed the class name based on third condition:

<script type="text/javascript">
    function pageLoad() {                
            document.getElementById('ctl00_Body_rgWMTSI_GridFooter').className = 'rgmine'}

</script>

edited Feb 5, 2013 at 0:38

answered Feb 5, 2013 at 0:08

Developer

3,05710 gold badges41 silver badges51 bronze badges

Collectives™ on Stack Overflow

IE 9 setting attribute of a style via Javascript not using JQuery libraries

Thanks everyone for the help

5 Answers 5

11 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Thanks everyone for the help

5 Answers 5

11 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related