javascript/jquery modify a css class

Question

Before loading my page i want to make some modification on class style. The style class is included in MyStyle.css

.divNew {
    float: left; 
    margin: 10px 5px 5px 25px;
}

And loading a new page i want to modify/overload the margin and to add height. Any suggestion? This is what i've tried:

function pageLoad() {
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    for (n in theRules) {
        if (theRules[n].selectorText == 'divNew') { ? ? ? ?
        }
    }
}

"Before loading my page i want to make some modification", jquery/javascript only runs after the page has completely loaded(i.e., on document ready). — Venkata Krishna
– Venkata Krishna, Commented Nov 4, 2013 at 15:53
If you are looking for these changes to be applied before the user sees it then document ready suites you just fine. — Trevor
– Trevor, Commented Nov 4, 2013 at 16:01

Trevor · Accepted Answer · 2013-11-04 16:03:18Z

1

Using jQuery on Document ready you could do something like this.

$(document).ready(function(){
    $('.divNew').css('margin','modifications');  // .css('margin','10px 10px 10px 10px');
    $('.divNew').height(newHeight);  // .height(300)
});

For reference

http://api.jquery.com/css/

edited Nov 4, 2013 at 16:03

answered Nov 4, 2013 at 15:54

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

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

1 Comment

user2483797 Over a year ago

Thanks. Great recommendation. Useful.

jbarnett · Accepted Answer · 2013-11-04 16:06:51Z

1

Use the jquery css function. It takes an object of CSS properties.

$(document).ready(function(){
    $('.divNew').css({
        "margin": "10px 5px 5px 25px",
        "height": "100px" //change to whatever your height is
    });
});

answered Nov 4, 2013 at 16:06

jbarnett

9845 silver badges7 bronze badges

Comments

Parker Hutchinson · Accepted Answer · 2013-11-04 16:07:05Z

1

You're over complicating this by a billion percent.

$('.divNew').css({'height':'2000px', 'width':'2000px'});

just use comma seperated values with the built in jquery css method.

answered Nov 4, 2013 at 16:07

Parker Hutchinson

1,7202 gold badges12 silver badges14 bronze badges

Collectives™ on Stack Overflow

javascript/jquery modify a css class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related