How to test for existence of CSS class in JavaScript without jQuery?

Question

I am writing a reusable .NET / Sitecore control which spits out some HTML elements with certain CSS classes. I'd like to provide a default set of CSS definitions for those classes, but only if nothing else in the page load has done so--this is to allow for default formatting but for this to be overridden outside the control.

Is there a reliable cross-browser way, preferably without jQuery, to sense in JavaScript whether there's a pre-existing CSS class definition?

By "CSS class definition" do you mean "A CSS rule-set with a selector that consists of a class selector and nothing else"? — Quentin
– Quentin, Commented Feb 11, 2014 at 13:38
Create a <style> element with an ID. Check if the ID exists. — Mr Lister
– Mr Lister, Commented Feb 11, 2014 at 14:21
Hi, Quentin... I guess I mean a CSS rule-set with a selector that includes a specific class selector. Thank you! — Iucounu
– Iucounu, Commented Feb 11, 2014 at 14:23
So set the default formatting in css selector that applies to that element/control and then override it in the definition of your css class. You don't really need to test for anything in jQuery/JavaScript/.Net for this. Let me know if you need an example. — jammykam
– jammykam, Commented Feb 11, 2014 at 15:12
jammykam, that'd be backward compared with what I need to do. Thank you, though. — Iucounu
– Iucounu, Commented Feb 11, 2014 at 18:44

Roman Klimenko · Accepted Answer · 2014-02-12 06:08:54Z

3

You have to look at document.styleSheets

answered Feb 12, 2014 at 6:08

Roman Klimenko

1,3371 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IvanL · Accepted Answer · 2014-02-18 09:53:55Z

I do not really understand why you'd only want to supply your defaults when there's nothing else... CSS itself basically words your requirement almost: "Cascading". You just need to make sure that your defaults are defined all the way on top (all the time) and that any custom styling follows afterwards. Especially if you are using CSS classes and your selectors use these classnames (because CSS of course has certain rules where a more specific defined declaration will take prio over a less specific one even when the first came before the latter).

The only reason I see to attempt your requirement is when you're concerned about every single bit you're sending towards the client. In that case javascript isn't exactly the answer as you need to determine this server side (instead of sending complex detection scripts towards the client which may be as large as your default styling...).

So I would reconsider your requirement before threading onto javascript detection of styling.

Collectives™ on Stack Overflow

How to test for existence of CSS class in JavaScript without jQuery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related