关于CSS的动态改变问题

Question

你是说用JS控制CSS吗？
1）你可以在所有的span加上class="bg"然后给bg设底色，否则只能考虑动态载入css
2）没看懂你的意思element.className可以取得element的class，不知道你是不是这个意思？

Answer 1

<style> 
span {background:#ff0000;} 
.ddd {background:#ff0000;} 
#dd  {background:#ff0000;} #dd a{} 
</style> 
<span>... </span>
<span id=dd >... </span>
<span class=ddd >... </span>
这三个的效果应该是一样的，
但我只知道其中的一个类名 className=ddd，（应该是对的吧）
而对于 #dd 是不是可以className=#dd ?
同样对于 #dd a 呢？<span class=ddd >... </span>
<span class=ddd >... </span>
<span class=ddd >... </span>
<span class=ddd >... </span>
要改变这四个<span>的样式，js代码如何做？

Answer 2

“我想改变所有 <span>的底色，有什么好方法？只能够一个一个地去改变吗？”＝＝＝＝＝＝＝＝＝＝＝＝＝＝如果span中的id或者name有规律的话可以考虑用一循环语句，一次全改如：document.getElementById("dd").style.backgroundColor="#E0E0E0";
document.getElementsByName[n].style.backgroundColor="#E0E0E0";
//变底色document.getElementById("dd").className="Button_Right02";
//变样式，把“Button_Right02”改成你的样式名称

Answer 3

先说问题2span {background:#ff0000;} 
适用于所有<span>... </span>.ddd {}
适用于所有<span class=ddd >... </span>#dd  {} 
适用于<span id=dd >... </span>#dd a{} 
适用于<span id=dd ><a href="XXX">XXX</a></span>
的<a href="XXX">XXX</a>所以:
问题2）
classname = ddd 
classname = dd 
classname = #dd a ?  是这样表示吗？ 有正确的吗？
答案:classname = ddd 正确

Answer 4

楼主直接用js获取span对象数组就可以了呀！

Answer 5

问题1(参考实例)<style> 
span{background:#f00;padding:2px margin:2px;border:1px #000 solid;} 
.aaa{background:#f00;}
.bbb{background:#00f;}
.ccc{background:#0f0;}
</style>
<div id=test>
<span>...</span> 
<span>...</span> 
<span>...</span> 
<span>...</span> 
</div>
<hr>
<input name=col type=radio style="background:#f00" onclick=changBG('aaa') checked>
<input name=col type=radio style="background:#00f" onclick=changBG('bbb')>
<input name=col type=radio style="background:#0f0" onclick=changBG('ccc')>
<script language="javascript">
<!--
function changBG(css){
var obj=document.getElementById("test").getElementsByTagName("span"),j=obj.length;
for (var i=0;i<j;i++)
obj[i].className=css
}
//-->
</script>

Answer 6

<script language="javascript">
<!--
var _bgcolor="#f00";function changBG(color){
_bgcolor = color;
}
//-->
</script>
<style> 
span{background:expression(_bgcolor);padding:2px margin:2px;border:1px #000 solid;} 
</style>
<div id=test>
<span>...</span> 
<span>...</span> 
<span>...</span> 
<span>...</span> 
</div>
<hr>
<input name=col type=radio style="background:#f00" onclick=changBG('#00ff00') checked>
<input name=col type=radio style="background:#00f" onclick=changBG('#0000ff')>
<input name=col type=radio style="background:#0f0" onclick=changBG('#ffff00')>

Answer 7

谢谢了，不过更中意7楼的再罗嗦多问一句：
<style> 
.ddd {background:#ff0000;} span {background:#ff0000;} 
#dd  {background:#ff0000;} 
#dd a {background:#ff0000;} 
</style> 
上述语句中，除了第1行 classname = ddd --- 所谓有类有名，余下的3行，均是所谓有类无名吗？classname = ？

Answer 8

.ddd -- 类名(class)
span -- 元素名(tagName : <span>于此 1</span><span>于此 2</span> )
#dd  -- id (element id='dd': <span id='dd'>于此</span>)
#dd a -- id >> 元素名(<span id='dd'><a href=''>于此</a></span>)