Menu
The jQuery CSS methods allow you to manipulate CSS class or style properties of DOM elements. Use the selector to get the reference of an element(s) and then call jQuery css methods to edit it. Important DOM manipulation methods: css(), addClass(), hasClass(), removeClass(), toggleClass() etc.
With the $. ajax() method, you can load the CSS from the server and enclose the content within the <style> tags, and finally append it at the end of the <head> element of the current document. The following code demonstrates this by dynamically loading the bootstrap library.
cssHooks. Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.
You can create style element and insert it into DOM
$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");
tested on Opera10 FF3.5 iE8 iE6
Simply
$("<style>")
.prop("type", "text/css")
.html("\
#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}")
.appendTo("head");
Noticed the back slashes? They are used to join strings that are on new lines. Leaving them out generates an error.
you can apply css an an object. So you can define your object in your javascript like this:
var my_css_class = { backgroundColor : 'blue', color : '#fff' };
And then simply apply it to all the elements you want
$("#myelement").css(my_css_class);
So it is reusable. What purpose would you do this for though?
You can use insertRule if you don't need to support IE < 9, according to dottoro. There's a bit of cross browser code over there as well.
document.styleSheets[0].insertRule('#my-window {\
position: fixed;\
z-index: 102;\
display:none;\
top:50%;\
left:50%;\
}', 0)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With