...

View Full Version : apply classes from a new external CSS



Kor
08-18-2005, 01:07 PM
I want to:
1. Change dynamically an external CSS src. The new external have the same classes names, only the attributes have other values.
2. Force the elements to use the new CSS attributes.

1. That is simple

document.getElementsByTagName('link')[0].setAttribute('src','newcss.css');

But
2. How can I "force" the elements to use the new values from the new external css file? Is this possible?

martin_narg
08-18-2005, 02:07 PM
I managed to get it working like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function importStyle(add) {
var newTag = document.createElement("style");
newTag.setAttribute("type", "text/css");
newTag.appendChild(document.createTextNode("@import url("+add+");"));

var oldTag = document.getElementsByTagName("style")[0];
oldTag.parentNode.replaceChild(newTag, oldTag);
}
</script>
<style type="text/css">
@import url(css1.css);
</style>
</head>

<body>
<a class="foo" href="#" onclick="importStyle('css1.css');return false;">css1.css</a>
&nbsp;&nbsp;
<a class="foo" href="#" onclick="importStyle('css2.css');return false;">css2.css</a>
<br><br>
<a class="foo">Hello world</a>
</body>
</html>

css1.css:


.foo {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #CC6600;
}

css2.css:


.foo {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #006699;
}


This is Gecko only, but I know a champion such as yourself can make it cross-dom compatible :D I gotta shimmey back to work.

Hope this helps

m_n

Kor
08-19-2005, 08:39 AM
thanks a lot... I'll dig for a cross-browser solution as well... :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum