Overwrite a css rule using javascript or jquery

Question

Is it possible to overwrite a css rule using jquery or javascript?

Let's say I have a table, with a bunch of rows, and each row holds a specific type of data. Each row (tr) has a class added to it, so we can differentiate between the data types it is holding.

For this example let's say the rows, with class "names" holds information about persons, and the rows with class "company" hold information about companies.

Let's say that we have a filter above our table, where we can hide and show all companies or persons from our table. When we select a checkbox, we either change the display of the specific rows to none, or to block(depending on the checkbox state), OR we add a class (hidden) to our specific rows. Our css would look something like this:

.names {
   /*additional css stuff here*/
}

.company {
   /*additional css stuff here*/
}

.company .hidden {
   display: none;
}

.names .hidden {
   display: none;
}

This works just fine, but what if I, say hide all the names, by adding the hidden class to the specific rows, but later introduce dynamically a new record of a person to the database. I would have to check our checkboxes state, and apply (or ommit) the specific class to the new tr, before inserting it to our table structure.

If I could somehow overwrite a css rule dynamically, for example, when the "names" checkbox gets checked, I overwrite the ".names" class from CSS, to display: none, I wouldn't have to worry about making additional checks when inserting new data in the table.

Is this possible somehow?

EDIT: I know how I can dynamically add a new class, or remove a class from a html element. What I want to achieve is to change the stylesheet on the run with jquery, overwrite the rules of a specific class from the original stylesheet.

possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — Ryan, Mar 26 '15 at 16:39
@ryan I know how I can dynamically add a new class, or remove a class from a html element. What I want to achieve is to change the stylesheet on the run with jquery, overwrite the rules of a specific class from the original stylesheet. — Adam Baranyai, Mar 26 '15 at 16:42
http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function?rq=1, http://stackoverflow.com/questions/8224527/how-can-i-edit-a-css-rule-in-jquery?rq=1, http://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript — Ryan, Mar 26 '15 at 16:43
@epascarello A *class* of `block` is not the same as a *display* property of `block`. — TylerH, Mar 27 '15 at 16:44
@epascarello That's irrelevant to the fact that your comment is saying "a tr should not have a **class** of `block`", emphasis mine. — TylerH, Mar 27 '15 at 18:03
@epascarello Very calm, but it was a mistake. The comment as it stands is erroneous, hence my question, and the ensuing comments. I'm just looking to make it clear that the comment is wrong, especially considering it has two upvotes. — TylerH, Mar 27 '15 at 18:13

score 4 · Accepted Answer · answered Mar 26 '15 at 16:41

4

You should not change a stylesheet rule. Instead change where you are adding classes to control the display state. Add a class to the table (or tbody) and not the rows.

Example: you want company rows hidden, you add a class "companyHidden" to the table element. The following rule will hide those rows.

table.companyHidden tr.company {
    display: none;
}

This way you do not have to worry about new rows and CSS does the work for you.

answered Mar 26 '15 at 16:41

epascarello

204,599
20
195
236

Hmm, I didn't think of that:) this would solve the problem, you are right:) . I will accept this question in 6 minutes, but just for the record, is there any way to change the stylesheet rule, or it is not possible with Jquery? – Adam Baranyai Mar 26 '15 at 16:45
Yes you can loop through stylesheets and look at the CSSRule and try to match the rule you are looking for. It is possible, but not the ideal solution. – epascarello Mar 26 '15 at 16:50

score 2 · Answer 2 · answered Mar 26 '15 at 16:50

You can add a style element, with the required CSS, on the fly to the document body.

See this JSFiddle

If references bootstrap.css and, on load, overrides .btn-primary:

$(function(){
   $("<style>")
       .text(".btn-primary{ background-color: cyan !important; min-height:20px; }")
       .appendTo($("body"));
});

You could use a similar approach I think?

Overwrite a css rule using javascript or jquery

2 Answers2