§ Javascript function to add css
This javascript is a way to add an extra style node (css) into a page.
This creates a style node and appends it to the head element. I use this in Greasemonkey to style other stuff I add to certain pages. I won't go into that here.
Note the var mystyle=""+<r><![CDATA[ etc., works in FF but I think it fails in IE; never tried in Safari. I don't know the ins and outs of this, but it's basically a way to cheat and have multi-line strings in javascript. I think. For other browsers you may have to make the css all in one line. If you use php, you could use the "multiline_to_single_line_javascript" function from Use iframe contents to change iframe to ajax div.
You may not have to use the setAttribute() function. Comparing the Use iframe contents to change iframe to ajax div entry, you may be able to use style.type="text/css";
function addmystyle()
{
//put the style in first so my div doesn't jump around
var styles = document.createElement('style');
styles.setAttribute('type', 'text/css');
var mystyle=""+<r><![CDATA[
.mylinksdiv a
{
float:left;
margin:1px;
padding:2px 5px;
background-color:#cccccc;
color:blue !important;
font-weight:400 !important;
opacity:.6;
}
.mylinksdiv a:hover
{
font-weight:900 !important;
}
div.mylinksdiv
{
float:left;
}
]]></r>;
var newStyle = document.createTextNode(mystyle);
styles.appendChild(newStyle);
var headRef = document.getElementsByTagName('head')[0];
headRef.appendChild(styles);
}
last edited on January 14th, 2010 at 2:20 PM
Comments
Slashback says:
Thanks! I just used this again in a new project I'm working on, too.
August 2nd, 2011 at 11:00 AM
Logo design says:
Great tip. I was having problem in adding CSS function to my Java script. Your blog post helped me a lot.
August 1st, 2011 at 10:56 PM
Add your comment
- Walid on "Adventures with Ubuntu 9.10 on G4 Yikes!" - I am in the same process as you. Although I still dual-boot to Windows for my ganimg leisure. My first contact with Ubuntu was way…
- Slashback on "Simpler adding & removing element classnames" - Actually, the addClassName function does what you want, pretty much the same way you suggest.
- angie on "Simpler adding & removing element classnames" - And what if I want to add a class, but keeping the csseals the element already has?I mean, I have an element with a class, let's name…
- backlinks on "Adjust iframe height to contents" - Definitely helped me.
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - You are welcome!
buy site says:
Well, i have faced this problem a lot of times and now i got how to add CSS to my java script. I bookmarked your page and will come back soonly.
August 23rd, 2011 at 7:13 AM