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

score 1 · Answer 1 · edited May 23 '17 at 11:48

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 '17 at 11:48

Community

1
1

answered Feb 05 '13 at 00:01

Travis J

81,153
41
202
273

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. – Pointy Feb 05 '13 at 00:03
@Pointy - You should avoid accessing those methods. Use the `setAttribute` and `removeAttribute` methods to interface with DOM nodes. Here is a jsfiddle (http://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. – Travis J Feb 05 '13 at 00:05
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. – Pointy Feb 05 '13 at 00:07
@Pointy - Stop leaving bad markup on the page. Which is best practice, this: `
one
` or this: `
one
`? – Travis J Feb 05 '13 at 00:09
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. – Pointy Feb 05 '13 at 00:13
@Pointy - No fiddles work in ie8 or ie7 from what I can see, there are too many errors with their newest version. Changing the dom will not change the "source" of the document, sure, but it will leave these tidbits hanging around. An empty `class` attribute for example is still present.Perhaps markup was a poor choice of mine there. As for this working on ie8 or ie7, it does. Always ensure that you have a proper environment when using IE. You are going to want to make sure your ` ` is proper, and also, you should really be using ``. – Travis J Feb 05 '13 at 00:30
Try appending `/embedded/result` to your fiddle URL. It most definitely does not work in older versions of IE; IE7 just ignores it, and IE8 throws an "invalid argument" exception. (I'm testing with genuine authentic IE7 and IE8 here.) – Pointy Feb 05 '13 at 00:31
I take it back; it doesn't work in IE7 (simpler test [here](http://gutfullofbeer.net/remattr.html)) but it does work in IE8 (and I suppose IE9 and 10 too). Something else in the jsfiddle code must be breaking IE8. – Pointy Feb 05 '13 at 00:37
And the thing is, there's **always** going to be a "className" property on a DOM node, whether there was a "class" attribute in the markup or not. It's a basic part of the API. – Pointy Feb 05 '13 at 00:38
@Pointy - I am also testing on the original version of ie7 and ie8. Using the meta tag does wonders for compatibility. Not sure why you think the embedded version will be any different. It sill has errors from bad jsfiddle.net code. Here is one `Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0;) Timestamp: Tue, 5 Feb 2013 00:36:35 UTC Message: Invalid argument. Line: 5187 Char: 3 Code: 0 URI: http://jsfiddle.net/js/moo-clientcide-1.3.js ` – Travis J Feb 05 '13 at 00:38
Yes I agree - the jsfiddle guys have been really active lately, and a lot of stuff that used to work in IE doesn't. The link in one of my recent comments is to a completely plain page on my own host. It works in IE8 (no JS errors) but the text stays red in IE7. – Pointy Feb 05 '13 at 00:41

score 1 · Answer 2 · answered Feb 05 '13 at 00:04

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?

score 0 · Answer 3 · answered Feb 05 '13 at 00:01

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 05 '13 at 00:01

Guffa

687,336
108
737
1,005

score 0 · Answer 4 · answered Feb 05 '13 at 00:01

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

Developer · Accepted Answer · 2013-02-05T00:38:59.770

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 05 '13 at 00:38

answered Feb 05 '13 at 00:08

Developer

2,987
10
40
51

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

Thanks everyone for the help

5 Answers5