JavaScript修改CSS

最新推荐文章于 2024-03-17 21:57:30 发布

最新推荐文章于 2024-03-17 21:57:30 发布 · 508 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用JavaScript来修改网页元素的CSS样式。首先演示了如何更改元素的类名以实现样式的切换，接着展示了如何直接修改特定CSS类的属性值。

JavaScript修改CSS

修改元素的CSS名称：

<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>

<style type="text/css">
.first
{
color: black;
}
.second
{
color: red;
}
</style>
<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>
<h1 class="first" id="changeme">Changeable text</h1>
<a href="javascript:;" onClick="change('changeme', 'second');">RED</a> | <a href="javascript:;" onClick="change('changeme', 'first');">BLACK</a>

2. 修改CSS的属性（来自http://www.shawnolson.net/）

脚本：

function changecss(theClass,element,value) {
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}

例子：

<span class="exampleA">Example A</span>
<span class="exampleB">Example B</span>
<span class="exampleA">Example A</span>
<input type="button" value="Change A Red" onclick="changecss('.exampleA','color','red')"/><input type="button" value="Change A Black" onclick="changecss('.exampleA','color','black')"/>