I'm trying to change style from a javascript function using setAttribute.
It doesn't work in IE.
Example:
<html>
<head>
<title>Test</title>
<style type="text/css">
p.s1 {color: red; font-size: 200%}
p.s2 {color: white; font-size: 200%}
body {background-color: blue; }
</style>
<script language="JavaScript" type="text/javascript">
function addText()
{myParagraph = document.getElementById("paragraph2");
var titleText = "Testing 2";
title = document.createTextNode(titleText);
myParagraph.appendChild(title);
myParagraph.setAttribute("style", "font-size: 400%; color: black;");
}
</script>
</head>
<body onload="addText()">
<p class="s1" id="paragraph1">
paragraph1:
</p>
<p class="s2" id="paragraph2">
paragraph2:
</p>
</body>
</html>
Suggestions?
ThankssetAttribute does not work too well x-browser. Try this method:var cssStr=myParagraph.style.cssText;
myParagraph.style.cssText='font-size: 400%; color: black;'+cssStr;
warning: make sure you add a terminating ';' for all style declarations.Thanks. It works in all 3 browsers that I check (IE, FF, Netscape). I googled cssText, and it's a string that contains all style information. But when I have:
'font-size: 400%; color: black;'+cssStr;
I would think that there are two font sizes assigned: the old one and 400%. I would think it would be a conflict. Well, it works so something must be wrong with the way I look at it...There's no conflict, the second declaration will take precedence. It would be more appropriate, therefore, to write:cssStr+'font-size: 400%; color: black;';thanks.
It doesn't work in IE.
Example:
<html>
<head>
<title>Test</title>
<style type="text/css">
p.s1 {color: red; font-size: 200%}
p.s2 {color: white; font-size: 200%}
body {background-color: blue; }
</style>
<script language="JavaScript" type="text/javascript">
function addText()
{myParagraph = document.getElementById("paragraph2");
var titleText = "Testing 2";
title = document.createTextNode(titleText);
myParagraph.appendChild(title);
myParagraph.setAttribute("style", "font-size: 400%; color: black;");
}
</script>
</head>
<body onload="addText()">
<p class="s1" id="paragraph1">
paragraph1:
</p>
<p class="s2" id="paragraph2">
paragraph2:
</p>
</body>
</html>
Suggestions?
ThankssetAttribute does not work too well x-browser. Try this method:var cssStr=myParagraph.style.cssText;
myParagraph.style.cssText='font-size: 400%; color: black;'+cssStr;
warning: make sure you add a terminating ';' for all style declarations.Thanks. It works in all 3 browsers that I check (IE, FF, Netscape). I googled cssText, and it's a string that contains all style information. But when I have:
'font-size: 400%; color: black;'+cssStr;
I would think that there are two font sizes assigned: the old one and 400%. I would think it would be a conflict. Well, it works so something must be wrong with the way I look at it...There's no conflict, the second declaration will take precedence. It would be more appropriate, therefore, to write:cssStr+'font-size: 400%; color: black;';thanks.