How can I detect a html class with javascript?

Question

I use these three lines of code to detect lesser internet explorer versions.

<!--[if lt IE 7]><html class="lt-ie8 lt-ie7 lesser-browser get-lost-ie-user please-leave-now"><![endif]-->
<!--[if IE 7]><html class="lt-ie8 ie7"> <![endif]-->
<!--[if !IE]><!--><html class="gtie7"><!--<![endif]-->

Using javascript, how can I find out whether or not the lt-ie8 class is enabled for the <html> element?

No demonstrated research effort, and it's not useful because it's using browser detection which is almost never the right way of solving issues with missing features. — Kevin B, Oct 30 '13 at 16:10
@KevinB i actually am using this to block ie6 and ie7, because anyone still using them... well I am not going to say. I would get arrested if I did — ben, Oct 30 '13 at 16:13
@KevinB I still need to warn users about their ungodly habits, so that they might upgrade and then re-visit with their firefox 27 super browser — ben, Oct 30 '13 at 16:17

Praveen Kumar Purushothaman · Accepted Answer · 2013-10-30T16:10:19.033

3

Using JavaScript, you can use:

document.getElementsByTagName("html")[0].classList.contains("lt-ie8");

That gives the list of classes. If classList is not implemented, it can be checked this way:

if (document.getElementsByTagName("html")[0].className.indexOf("lt-ie8") != -1)
  // The browser...

Or use jQuery's $.hasClass() if there's a class set:

$("html").hasClass("lt-ie8");

So, you can use it this way:

if ($("html").hasClass("lt-ie8"))
  // Class is enabled.
else
  // Class is not there.

edited Oct 30 '13 at 16:10

answered Oct 30 '13 at 15:58

Praveen Kumar Purushothaman

164,888
24
203
252

1

jquery isn't needed for everything – Nicolas Brugneaux Oct 30 '13 at 16:06
1

@mortaga That funny question was tagged under jQuery! FYI!!! Check [Revisions](http://stackoverflow.com/posts/19687783/revisions). And I have provided the JavaScript version too! – Praveen Kumar Purushothaman Oct 30 '13 at 16:07
and browser detection is almost never needed. and yet people still do it. – Kevin B Oct 30 '13 at 16:08
my apologies, haven't see the jquery tag. – Nicolas Brugneaux Oct 30 '13 at 16:08
So who was the downvoter? I have edited the question to make it answer for the question. – Praveen Kumar Purushothaman Oct 30 '13 at 16:11

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

I would use document.body.parentNode to get your <html> tag as the DOM does not need to be searched like the other methods. Reimplementing the jQuery hasClass method is the best way to check if a javascript class has a class in legacy browsers since the other methods normally don't work when there are multiple classes or if the class is a substring of another class.

Source

function hasClass(elem, klass) {
    return (" " + elem.className + " ").indexOf(" " + klass + " ") > -1;
}

if (hasClass(document.body.parentNode, "lt-ie8")) {
    // ...
}

If you're only targeting modern browsers then using classList is the best option.

if (document.body.parentNode.classList.contains("lt-ie8")) {
    // ...
}

Nicolas Brugneaux · Answer 3 · 2013-10-30T16:05:07.717

0

if (document.getElementsByClassName('lt-ie8').length > 0) {
    // EDIT due to the important comment below
    //console.log("you are using a crappy browser");
    alert("you are using a crappy browser");
}

edited Oct 30 '13 at 16:05

answered Oct 30 '13 at 16:00

Nicolas Brugneaux

353
2
8

7

wouldn't that break the page, since said crappy browser doesn't support console.log() if the console isn't open? – Kevin B Oct 30 '13 at 16:00
2

`console || (console = { 'log' : function(m) { alert(m) } })` :D – vzwick Oct 30 '13 at 16:05
why downvotes since this answer perfectly the question, and was the first one. – Nicolas Brugneaux Oct 30 '13 at 16:17
Not quite first, but still see no reason for dv – Kevin B Oct 30 '13 at 16:19

score 0 · Answer 4 · answered Oct 30 '13 at 16:01

0

var isBrowserCrappy = document.getElementsByTagName('html')[0].className.indexOf('lt-ie8') !== -1;

answered Oct 30 '13 at 16:01

vzwick

11,008
5
43
63

@KevinB - yeah, realized that a sec ago. Thx for the pointer. – vzwick Oct 30 '13 at 16:03

score 0 · Answer 5 · answered Oct 30 '13 at 16:01

0

Try:

if( document.getElementsByTagName("html")[0].className == 'gtie7' )
    alert( 'html has class "gtie7"' );

answered Oct 30 '13 at 16:01

iambriansreed

21,935
6
63
79

won't work since the html element can also have other classes (in the example at least) – Nicolas Brugneaux Oct 30 '13 at 16:06

talemyn · Answer 6 · 2013-10-30T16:41:09.097

Since you've got the question tagged with jquery just use:

if ($(".lt-ie8").length > 0) {
    . . . do stuff . . .
}

I tested it in Firefox, IE7, IE9, and Chrome . . . works fine in all of them . . .

Edit: $("html.lt-ie8").length is even more efficient . . .

Note: in HTML4 and XHTML, class is not a valid attribute for the <html> tag. Even though it seems to work, you might want to consider moving it to the <body> tag instead.

How can I detect a html class with javascript?

6 Answers6