动态修改CSS类选择器内容

jsgzwt 2011-12-14 09:43:08

...全文

335 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

ilikethelife 2011-12-15

打赏
举报

[Quote=引用 6 楼 theforever 的回复:]
引用 5 楼 p2227 的回复:
你想要用一句就能实现这个功能肯定要借助jquery。不知道jquery里面怎么封装，但类选择器原生js不知道如何简便实现

这说得太绝对了。
其实很容易实现的，就一句话。
只不过楼主的例子，不容易看出效果。我下面另外写了个例子，通过颜色的改变，比较容易看到效果：
<STYLE>
.theforever {width:50px;color:red;}……
[/Quote]
又看到个精采回复，学到东西了。
一句话还是几句话并不主要，关键是改对地方。用JQ修改的不是样式，而是使用这个样式的对象，如果新建了使用这个样式的其它对象，或者对其它对象应用这个样式，那还是老样子。
真正修改样式表本身才是中规中矩的根本之道。
很多同学学JQ容易学到误区里去了。这真是一个值得注意的事情。

p2227 2011-12-14

打赏
举报

自己学习着修改成兼容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>

p2227 2011-12-14

打赏
举报

[Quote=引用 6 楼 theforever 的回复:]

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

这说得太绝对了。
其实很容易实现的，就一句话。
只不过楼主的例子，不容易看出效果。我下面另外写了个例子，通过颜色的改变，比较容易看到效果：
<STYLE>
.theforever {width:50px;color:red;……
[/Quote]哦哦，学习了，不过这句耦合度太高了，导致实用性不高。
明白这是思路上的变化，我的愿意是针对class="ls"的所有dom，你这里变成针对style这个html标签本身了
另外这个方法应该我看了只有ie下有效，当然我明白你是示范，嗯嗯。

碧海情天-赵亮 2011-12-14

打赏
举报

上面的例子，针对的不是某个特定的样式名称，但如果针对特定的样式名称进行更改，同样容易。
可以看出document.styleSheets[0].cssText就是整个<STYLE>内部的内容。
所以假如针对.LS改变它的设置，只需要把“.ls{width=120px;}”作为REPLACE要替换的部分，把“.ls{width=555px;}”作为替换目标，这样就行了。

至于1楼，是舍本求末，想用JQ的选择器得到所有应用LS样式的对象，对这些对象进行修改。当然麻烦，而且低效。相反，直接修改样式表本身就很简单而且高效了。

碧海情天-赵亮 2011-12-14

打赏
举报

[Quote=引用 5 楼 p2227 的回复:]
你想要用一句就能实现这个功能肯定要借助jquery。不知道jquery里面怎么封装，但类选择器原生js不知道如何简便实现
[/Quote]
这说得太绝对了。
其实很容易实现的，就一句话。
只不过楼主的例子，不容易看出效果。我下面另外写了个例子，通过颜色的改变，比较容易看到效果：
<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>

p2227 2011-12-14