View Full Version : apply classes from a new external CSS

08-18-2005, 02: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


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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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);
<style type="text/css">
@import url(css1.css);

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


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


.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


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