Modify css class using Javascript

Question

I have the following css class:

<style>
.popup
    {
        width : 1350px !important;
        height: 810px;
        margin-top:-100px;
        padding-top:10px;
    }
</style>

Is it possible to modify any property of that class? Not of an object that this class has applied to, but css itself.

Thanks

Added full code:

<style>
.ngdialog.dialogcaseeditor .ngdialog-content
    {
        width : 1350px;
        height: 910px;
        margin-top:-100px;
        padding-top:10px;
    }
</style>

If you find you want to modify a property, which of course you can do if you really want to, you are probably approaching the problem incorrectly. What is your end objective? — , Sep 28 '15 at 16:37
This is too broad in my opinion. Give us something specific. What do you want to change? Do you want to overwrite the rules inside the style tags? Or can it be a new style tag that's inserted after that one? And so on. More details please. — Bram Vanroy, Sep 28 '15 at 16:38
The reason I am doing it is because I am working with ngDialog that can only be sized using a css class. Since I have to define one before creating the dialog the sizes are all hard coded. — Mark, Sep 28 '15 at 16:57

score 0 · Answer 1 · edited May 23 '17 at 12:14

It is possible to manipulate the stylesheet rules themselves with javascript, by getting the right sheet (document.styleSheets) and modifying the rules (sheet.cssRules).

Finding the right sheet and rule to modify is itself a problem. See my answer on Can I disable a CSS :hover effect via JavaScript?

Edit: Depending on why you want to modify the style properties, there may be a better approach to the whole thing.

score -1 · Answer 2 · answered Sep 28 '15 at 17:02

Here's an example using pure JavaScript (getElementByClassName), no jQuery, to add a background colour to all items with a class of .popup:

var popups = document.getElementsByClassName('popup'),
    i = popups.length;

do {
    i--;
    popups[i].style.backgroundColor = "green";
} while (i >= 0)

arcyqwerty · Answer 3 · 2015-09-28T16:51:14.417

-2

You could use JavaScript to add a new css rule like .popup { padding-top: 5px; } and it would completely override the padding of the original CSS due to the CSS cascading rules (last rule wins). This has the same effect of changing the original style, as applied to all matching elements and inherited styles.

Note that both declarations must have "the same weight, origin and specificity"

Edit:

Example to change width:

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".popup { width : 1500px !important; }";
document.body.appendChild(css);

http://jsfiddle.net/pw2argvz/

edited Sep 28 '15 at 16:51

answered Sep 28 '15 at 16:36

arcyqwerty

10,325
4
47
84

Ok, in my example how would I change the width using JS? – Mark Sep 28 '15 at 16:46
$('body').append(''); – sglazkov Sep 28 '15 at 17:06
I have modified my initial code to show the full css code. Still not sure, how I can get it work using the provided suggestions. – Mark Sep 28 '15 at 17:37
What are you trying to modify? The `width` of `.popup` or something else? I have a fiddle in my answer that shows a basic case. If you need something more specific, please update/create your own and provide a link. – arcyqwerty Sep 28 '15 at 19:21

Modify css class using Javascript

3 Answers3