使用javascript在IE8和其他浏览器上获取body类的标准解决方案是什么？

Question

I need to get body class at internet explorer 8 and lower, i'm using the javascript classList method but it seems that it's not working on old IE browsers ( http://caniuse.com/#search=classList ), is there any standard solution for new browser and the oldest one?

var b = document.body;
// check body class
if (!b.classList.contains('ie-8')) {
    b.classList.add('ie-block');
    // removing DOM main container
    b.removeChild('mainContainer');
}

Thx for help.

Answer 1

You can use the standard .className property , which contains a space-separated list of the classes.

Also there's an error in your code: the line b.removeChild('mainContainer'); is wrong: the removeChild method takes an Element as argument , and you are giving a string to it instead. You should first get that element (which I suppose is the element with id="mainContainer" , and then remove it properly.

Stated the above, you can then check if the body's className contains the desired class and behave consequently , here's a working example:

var b = document.body;

if (~(" "+b.className+" ").indexOf(" ie-8 ")) {
    b.className += " ie-block";
    b.removeChild(document.getElementById("mainContainer"));
}

Additional notes:

• I'm adding those spaces to the className because classNames do not usually begin/end with a space, but they separate classes with spaces, so you'll need to check for " ie-8 " (with leading spaces), because matching it without spaces can result in a wrong identification (eg a class like "some-ie-8-thing" would match).
• I'm using ~(...).indexOf because the ~ operator will return 0 (which is false ) only if the number returned by indexOf is -1 , which means that the espression will evaluate to true only if the string contains the given substring.
• I am also adding a space at the beginning in " ie-block" because of classes being separated with spaces.