Changing stylesheets after DOM is loaded

Question

In my HTML I have a div:

<div id="devicelayout">
    Some text here
</div>

and corresponding CSS:

#devicelayout
{
    width:1078px;
}

Once my page is loaded, how do I change the rules of CSS #devicelayout?

Change the rules? Can you give more detail? I mean you could define rules in a class, and add that class to the element. Or you can put styles directly on an element. Are you sure you actually need what you're asking for? — cookie monster, Apr 04 '14 at 21:43
Do you use jquery or plain javascript as we can suppose from tags that you added ? — geek, Apr 04 '14 at 21:44
i want to change the definition of css selector #devicelayout — user3499814, Apr 04 '14 at 21:45
Check [this answer](http://stackoverflow.com/a/17454470/1169519), maybe you get some ideas. — Teemu, Apr 04 '14 at 21:45
I'd be tempted to override the property values in the stylesheet with local values in a style attribute on the element. Modifying the stylesheet itself may well trigger a recaculate and repaint for the entire page. This is a non trivial operation and would be bad for performance, especially in a loop or as part of a rapidly repeating operation. — pwdst, Apr 04 '14 at 23:52

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

If you just want to change css styles of the element you can directly assign a different class to it or change css properties of the element using JQuery using

$("#devicelayout").css("property", "value")

or

$("#devicelayout").addClass("newClass")

Or if you want to change css rules then try modifying stylesheet rules at document.styleSheets object. See here

edited May 23 '17 at 12:11

Community

1
1

answered Apr 04 '14 at 22:01

user2009750

3,169
5
35
58

score 1 · Answer 2 · answered Apr 04 '14 at 21:48

1

$(document).ready(function(){
  $('#devicelayout').css("attributeName","attributeValue");
})

Here you have some more info about using css function: http://api.jquery.com/css/

answered Apr 04 '14 at 21:48

geek

596
8
26

score 1 · Answer 3 · edited Apr 04 '14 at 22:07

1

Try this code:

$(document).ready(function(){
    $("#devicelayout").css("width","500px");
});

edited Apr 04 '14 at 22:07

Ilya Palkin

14,687
2
23
36

answered Apr 04 '14 at 21:48

Artur Stary

724
2
13
30

score 1 · Answer 4 · answered Apr 04 '14 at 21:54

you can use jquery as a solution for this... put all the css changes you want your #devicelayout to happen after page load into a css file for example devicelayout.css. then in your script tag (ofcourse after you include the jquery library) add this code...

$(document).ready(function(){ 
   if($("#devicelayout").size()>0){ /*Check if the id "#devicelayout" exists within your DOM*/

  $("head").append($("<link rel='stylesheet' href='devicelayout.css' type='text/css' />")); /*if true, the new <link> element is appended to the <head> element */   }
});

This will also let you change the css of a number of ids after page load, not just one. hopefully this helps

Changing stylesheets after DOM is loaded

4 Answers4