动态修改CSS类选择器内容

Question

<style>
.ls{width=120px;}
</style>
<script>
  //在这里加一句可以改变.ls中width的值。
</script>怎么做才行呢？

Answer 1

如果 .ls 很多的话用JS确实不方便, jquery方便,$(".ls").width(200);就这样就行, 要引用jquery.js

Answer 2

jquery不也是用js实现的吗，我就是不想用jquery啊，不过还是要谢谢楼上的朋友。

Answer 3

你想要用一句就能实现这个功能肯定要借助jquery。不知道jquery里面怎么封装，但类选择器原生js不知道如何简便实现

Answer 4

这说得太绝对了。
其实很容易实现的，就一句话。
只不过楼主的例子，不容易看出效果。我下面另外写了个例子，通过颜色的改变，比较容易看到效果：
<STYLE>
.theforever {width:50px;color:red;}
#theforever {width:150px;color:silver;}
</STYLE>
<div class="theforever">这里应该是红色的，但它会被下面的JS通过改变CSS样式设置而改变颜色</div>
<div id="theforever">这里应该是银灰色的，的确这个不会发生变化，只作为对比</div>
<script>
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow"); //一句，不就OK了？
</script>

Answer 5

上面的例子，针对的不是某个特定的样式名称，但如果针对特定的样式名称进行更改，同样容易。
可以看出document.styleSheets[0].cssText就是整个<STYLE>内部的内容。
所以假如针对.LS改变它的设置，只需要把“.ls{width=120px;}”作为REPLACE要替换的部分，把“.ls{width=555px;}”作为替换目标，这样就行了。至于1楼，是舍本求末，想用JQ的选择器得到所有应用LS样式的对象，对这些对象进行修改。当然麻烦，而且低效。相反，直接修改样式表本身就很简单而且高效了。

Answer 6

哦哦，学习了，不过这句耦合度太高了，导致实用性不高。
明白这是思路上的变化，我的愿意是针对class="ls"的所有dom，你这里变成针对style这个html标签本身了
另外这个方法应该我看了只有ie下有效，当然我明白你是示范，嗯嗯。

Answer 7

自己学习着修改成兼容ie,chrome,ff的了。。呃，我真无聊，睡觉去
<STYLE>
.theforever {width:450px;color:red;}
#theforever {width:350px;color:silver;}
</STYLE>
<div class="theforever">这里应该是红色的，但它会被下面的JS通过改变CSS样式设置而改变颜色</div>
<div id="theforever">这里应该是银灰色的，的确这个不会发生变化，只作为对比</div>
<style>
.abc{
background:blue;
}
</style>
<script>
if(document.all){
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow"); 
}else{
document.styleSheets[0].cssRules[0].style["color"] = "yellow" ;
//.cssText=document.styleSheets[0].cssRules[0].cssText.replace(/red/g,"yellow"); 
}
</script>

Answer 8

又看到个精采回复，学到东西了。
一句话还是几句话并不主要，关键是改对地方。用JQ修改的不是样式，而是使用这个样式的对象，如果新建了使用这个样式的其它对象，或者对其它对象应用这个样式，那还是老样子。
真正修改样式表本身才是中规中矩的根本之道。
很多同学学JQ容易学到误区里去了。这真是一个值得注意的事情。