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

Answer 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");

Answer 2

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?

Answer 3

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");

Answer 4

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 = '';

Answer 5

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>