controlling css with javascript works with mozilla but not with webkit based browsers
- by GlassGhost
Im having problems with applying css text variable in this javascript with webkit based browsers(Chrome & Safari) but it works in firefox 3.6
the function:
function addGlobalStyle(sCss) {
var head = document.getElementsByTagName('head')[0];
if( !head || head == null ) { return false; }
var oStyle = document.createElement('style');
oStyle.type = 'text/css'; oStyle.rel = 'stylesheet'; oStyle.media = 'screen';
if ( is_gecko ) { // firefox WORKING !!!
oStyle.href = 'FireFox.css'; oStyle.innerHTML = sCss;
head.appendChild(oStyle); return true;
} else {//nothing but firefox works
oStyle.href = 'FireFox.css'; oStyle.innerHTML = sCss;
head.appendChild(oStyle); return true;
}
}
the use of the function:
var NewSyleText = //The page styling
"h1, h2, h3, h4, h5 {font-family: 'Verdana','Helvetica',sans-serif; font-style: normal; font-weight:normal;}" +
"body, b {background: #fbfbfb; font-style: normal; font-family: 'Cochin','GaramondNo8','Garamond','Big Caslon','Georgia','Times',serif;font-size: 11pt;}" +
"p { margin: 0pt; text-indent:2.5em; margin-top: 0.3em; }" +
"a { text-decoration: none; color: Navy; background: none;}" +
"a:visited { color: #500050;}" +
"a:active { color: #faa700;}" +
"a:hover { text-decoration: underline;}";
addGlobalStyle(NewSyleText);//inserts the page styling
