Home/ Questions/Q 8133043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T09:29:35+00:00

I am using the classes .js and .no-js on the <html> element to differentiate

  • 0

I am using the classes .js and .no-js on the <html> element to differentiate between layouts that have Javascript and those that don’t.

With the <html> element, I added a default class of ‘no-js’. Then I include a single line of script in the header, document.getElementsByTagName("html")[0].setAttribute("class","js"); to switch the html class to ‘js’. Obviously this line of code will only work for browsers that have js enabled, so the <html> element will become <html class=”js”> whereas non-js enabled browsers will continue to read <html class=”no-js”>.

And then I will simply use .js someElement{ font-weight:bold;} versus .no-js someElement{ font-weight:normal;} to style my page differently.

However, I find that this approach fails dramatically on IE7. On IE7, the script works – or so it seems. On Developer Tools, it shows <html class=”js”>. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the <html> element has a class of .no-js. (Check out http://bit.ly/LMre3N to get a clearer picture.)

I can’t begin to imagine what exactly is wrong here: is this a case of IE7 behaving wrongly when rendering CSS, or is it a case of scripting not working properly? Here’s what I tried:

CSS

  1. Changing the order of .js and .no-js declarations, as I figured it could be the latter overriding the former that’s causing the problem – NOPE.
  2. Changing the order of the script and stylesheets, since it might be because IE7 read the .no-js stylesheet before it read the script – NOPE.
  3. Changing the specificity of the declarations – perhaps being more specific will lead IE7 to read the .js declarations – NOPE.
  4. Removing the .no-js class from the document altogether, hoping that IE7 will thus read .js declarations. NOPE – it simply ignores both the .no-js and the .js declarations.

In short, IE7 totally and completely ignore the fact that there is a .js declaration. So I figured it might be the script that had problems, and here’s what I did:

Javascript

  1. I added ‘type=”text-javascript”‘ to <script> – No effect.
  2. I tried document.documentElement instead of document.getElementsByTagName('html')[0] – still the same.
  3. I used var htmlOrWhat=document.getElementsByTagName("html")[0];
    alert(htmlOrWhat);    , FF, Chrome, Opera, Safari, IE8, and IE9 returns ‘[object HTMLHtmlElement]’, whereas IE7 returns [object], leading me to think IE7 is not reading the <html> element properly.
  4. I then tried to read the id and lang attributes of <html> to test if IE7 is actually reading the element properly and yes, it retrieves these attributes correctly, it just simply refuse to apply .js css declarations to it.

By now, I’m at my wits’ end (though I suspect the [object] anomaly is related to my problem), and I hope someone here at Stackoverflow will be able to help me out. I will really appreciate it if someone can point out exactly what’s wrong with IE7 here, and how to fix it. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    setAttribute() and getAttribute() are generally broken in IE7 and earlier (and compatibility modes in later versions). Use the element’s className property instead.

    document.getElementsByTagName("html")[0].className = "js";

    Here’s a fiddle demo – http://jsfiddle.net/ajcw/6Yz8x/1/

    • 0