众所周知，在HTML文档中调用外部样式表来呈现样式是样式表
发挥最大威力的地方！
在写JS操作外部样式表的时候发现它有一个很大的局限性，
在JS中写style属性也是不符合标准的，因为它没有把行为层与
表现层分开，所以我就通过修改元素的className属性来操作样式，
刚开始感觉挺好，但是时间久了就发现在外部样式表
有大量Id选择符样式，如下所示：
#main{}
#cont div{}
#cont div .red{}
.cont div #red{}
这些样式定义怎样使用JS来调用？
尤其是包含了Id选择符的样式定义，
不希望直接写style属性，而是像修改元素的className属性
那样来操作，能否实现？
怎样实现？
发挥最大威力的地方！
在写JS操作外部样式表的时候发现它有一个很大的局限性，
在JS中写style属性也是不符合标准的，因为它没有把行为层与
表现层分开，所以我就通过修改元素的className属性来操作样式，
刚开始感觉挺好，但是时间久了就发现在外部样式表
有大量Id选择符样式，如下所示：
#main{}
#cont div{}
#cont div .red{}
.cont div #red{}
这些样式定义怎样使用JS来调用？
尤其是包含了Id选择符的样式定义，
不希望直接写style属性，而是像修改元素的className属性
那样来操作，能否实现？
怎样实现？
styleSheets，rules怎么使用啊？
以前没有使用过，在IE和FF兼容吗？
最好有个小例子。
<style>
.content{font-size:12px;}
.content div#red{ color:red }
#size1{ font-size:15px; }
</style>
<body>
<div class="content">
<div id="red">testtesttest</div>
</div>
<script>
var red = document.getElementById("red");
with(document.styleSheets[0]) {
if (document.all) addRule(".content div#blue", "color:blue;font-size:20px;");
else insertRule(".content div#blue" + "{" + "color:blue" + "}", cssRules.length);
}
red.id = "blue";//蓝色，20号字体
</script>
</body>
</html>
当前还有其它removeRule，deleteRule, selectorText等，lz可以上网查查
但是我不想在JS代码中出现具体的CSS属性及其属性值
在JS代码中只想出现.content div#blue这些标记, 而不出现color:blue;font-size:20px;这些内容
请问该怎么办？？？
而类选择器，是可以被反复利用的在DOM上的样式
具体属性均放在外部CSS文件中。
但是className只能修改.content类定义，
对于#blue定义怎样修改？
<style>
.content{font-size:12px;}
.content div#red{ color:red }
#size1{ font-size:15px; }
</style>
<body>
<div class="content">
<div id="red">testtesttest</div>
</div>
<script>
var red = document.getElementById("red");
with(document.styleSheets[0]) {
if (document.all) addRule(".content div#blue", "color:blue;font-size:20px;");
else insertRule(".content div#blue" + "{" + "color:blue" + "}", cssRules.length);
}
red.id = "blue";//蓝色，20号字体with(document.styleSheets[0]) {
var sheetRules = document.all ? rules : cssRules;
for (var j = sheetRules.length - 1; j >= 0; j--) {
if (eval("/^.content div#blue$/i").test(sheetRules[j].selectorText)) {
sheetRules[j].style.color = "green";
sheetRules[j].style.fontSize = "30px"; //blue的style已改成绿色，30号字体
}
}
}
</script>
</body>
</html>
我想要的是下面的效果。<html>
<link rel=stylesheet href="1.css" type="text/css" />
<body>
<div id="content1" class="content1" onmouseover="this.className='content2'" onmouseout="this.className='content1'" >content1</div>
<div id="content2" class="content2" onmouseover="this.className='content1'" onmouseout="this.className='content2'">content2</div>
<div id="size1" onmouseover="this.className=''" onmouseout="this.className=''">size1</div>
<div id="size2" onmouseover="this.className=''" onmouseout="this.className=''">size2</div>
</body>
</html>.content1{color:red;font-size:35px; }
.content2{ color:blue;font-size:35px; }
#size1{ font-size:15px; }
#size2{ font-size:35px; }
我的CSS代码全部在外部文件，
className='content2'这句代码通过简单修改类名就实现了效果。
className='size1'或者idName='size1'肯定不对，
有没有类似于className的用语操作id的属性？
addRule(".content div#blue", "color:blue;font-size:20px;");和
style.fontSize = "30px";
一样都是在JS中直接使用了具体属性名，
我的意思是说只想修改CSS样式表定义中大括号前面的名称的就行了
不知道我说清楚没有？