请问如何用javascript动态修改css文件？
有一个css文件：abc.css
内容如下：
.class1
{width:10px}
要动态查找到这个类并修改里面的属性.
我找到的操作方法是使用dom的styleSheets集合。
先在页面加上
<link rel="stylesheet" type="text/css" href="abc.css" />
然后调用document.styleSheets[0]得到这个css文件的引用，再根据一些子属性可以定位到这个 .class1{}
但怎么把他的内容修改呢？
这样取得引用好像是不能修改原文件的，有没有像导入xml文件那样的方法呢？
问题点数：20 回复次数：12 显示所有回复显示星级回复显示楼主回复 修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
s_liangchao1s
求学(思考才是进步的本质)
等级:
可用分等级：富农
总技术专家分：16083
总技术专家分排名：900
3
发表于：2008-05-29 18:34:221楼 得分:0
abc.css
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="abc.css" />
<TITLE> New Document </TITLE>
<script>
window.onload=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
</script>
</HEAD>
<BODY>
<div class="class1">aaa</div>
</BODY>
</HTML>
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
btbtd
千君万码 - 君临天下 http://www.btbtd.org/
等级:
可用分等级：中农
总技术专家分：8229
总技术专家分排名：2368
发表于：2008-05-29 23:03:002楼 得分:20
这个问题大麻烦..
如果是在 style 里还容易点
在 link 里, IE里可以很容易解决, 在FF里只能遍历...
一个参考函数
1. Test.html
2. Style.css
1. Test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template </title>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Style.css" id="LinkStyle" />
<div class="Changed">
<dl id="category_1_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_2_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_3_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_4_box">
<dd value="0">请选择 </dd>
</dl>
</div>
<br clear="both" />
<div style="color:#ccc; padding:5px 2px; clear:both;">
您当前选择的是:
<span id="ProductCatStatus"> </span>
</div>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[*/
var LinkStyle =document.getElementById("LinkStyle");
fReplaceLinkStyle(LinkStyle, "CatShow", "Changed", true);
function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact)
{/* shawl.qiu code, void return */
var sExact = "";
if(bExact) sExact = "\\b";
var Re = new RegExp(sExact+sFind+sExact, "g");
if(LinkStyle.sheet)/* firefox */
{
var Rules = LinkStyle.sheet.cssRules;
var Len = Rules.length;
for(var i =0; i <Len; i++)
{
var Item = Rules.item(i);
if(typeof Item.selectorText!="undefined")
{
if(Re.test(Item.selectorText))
{
LinkStyle.sheet.insertRule(Item.cssText.replace(Re, sReplace), Len++);
}
}
}
for(var i=Len-1; i>=0; i--)
{
var Item = Rules.item(i);
if(typeof Item.selectorText!="undefined")
{
if(Re.test(Item.selectorText))
{
LinkStyle.sheet.deleteRule(i);
}
}
}
}
else
{
LinkStyle.styleSheet.cssText = LinkStyle.styleSheet.cssText.replace(Re, sReplace);
}
}/* function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact) */
function fTestFunc(XObj)
{/* shawl.qiu code, void return */
var Ar = [];
for(var i in XObj)
{
Ar.push(i.fontcolor("blue")+": "+XObj[i]);
}
var div = document.createElement("div");
with(div.style)
{
margin = "10px;";
padding = "5px;"
border = "1px solid blue";
}
div.innerHTML = Ar.join(" <br/>");
document.body.appendChild(div);
}/* function fTestFunc(XObj) */
/*]]>*/
</script>
</body>
</html>
2. Style.css
.CatShow
{
}
.CatShow dl
{
float:left;
margin:0px 2px;
border:1px solid #ccc;
padding:0px;
width:200px;
height:277px;
overflow:hidden;
overflow-y:scroll;
}
.CatShow dl dd
{
margin:0px;
padding:2px;
display:block!important;
width:180px;
}
.CatShow dl .HasItem
{
background:transparent url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
display:block;
width:180px;
}
.CatShow dl .CurCat
{
background:#CAFFC0;
border:1px solid #ccc;
display:block;
width:180px;
}
.CatShow dl .CurCat_HasItem
{
border:1px solid #ccc;
background:#CAFFC0 url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
display:block;
width:180px;
}
#ProductCatStatus
{
color:black;
font-weight:bold;
}
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:22:203楼 得分:0
谢谢两位，基本和我已经用上的方法差不多。
可能我没问清楚，就是说在js里把这个引用到的样式表修改后，要传给底层服务器端将修改后的样式保存到css文件，要怎么操作，如果是xml的话，通过dom操作可以直接传，但样式表要怎么传呢？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:22:454楼 得分:0
谢谢两位，基本和我已经用上的方法差不多。
可能我没问清楚，就是说在js里把这个引用到的样式表修改后，要传给底层服务器端将修改后的样式保存到css文件，要怎么操作，如果是xml的话，通过dom操作可以直接传，但样式表要怎么传呢？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:30:115楼 得分:0
另外想问问，要去修改css文件，只能把它link进来再去取link里的引用么？总觉得拐了弯子。。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
wwy520
天使软件
等级:
可用分等级：长工
总技术专家分：81
总技术专家分排名：103463
发表于：2008-05-30 09:53:296楼 得分:0
该回复于2008-05-30 11:07:56被版主删除
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 10:55:387楼 得分:0
再请教一下
如下这个css：
.topSpace
{width:100%;height:9px;clear:both;}
用 .style.cssText 取得整段样式内容，
在firefox下按原文输出：width:100%;height:9px;clear:both;
在IE下顺序作了变动(按什么排的还没搞清...)，而且属性名为大写：CLEAR: both; WIDTH: 100%; HEIGHT: 9px
有简单的办法保持一致吗？难道要一个个属性取出来作处理？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 11:52:218楼 得分:0
5楼的问题补充一下，不能修改帖子还真不方便。。
是这样的，我想在那个页面里这个css文件进行操作，但不想让页面使用这个css文件里的样式，如果用link指令包进来的话，页面就会使用这个样式了。。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
test33
隐姓埋名
等级:
可用分等级：富农
总技术专家分：574
总技术专家分排名：29282
发表于：2008-05-30 17:57:479楼 得分:0
classname=XXX
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
kingwolf_JavaScript
浴火凤凰
等级:
可用分等级：掌柜
总技术专家分：3998
总技术专家分排名：5173
发表于：2008-06-01 14:38:3010楼 得分:0
学习。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yxtyxt3311
韬
等级:
可用分等级：贫农
总技术专家分：142
总技术专家分排名：72814
发表于：2008-06-10 10:04:4711楼 得分:0
.class1{}
.class2{}
document.getElementById("name").classname="class1";
document.getElementById("name").classname="class2";
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
dh20156
风之石
等级:
可用分等级：中农
总技术专家分：36978
总技术专家分排名：244
发表于：2008-06-10 10:25:5112楼 得分:0
JS当然不能修改并保存原始文件，它只能做到在DOM中修改并应用这些修改，要保存文件还是靠服务端来实现吧。
内容如下：
.class1
{width:10px}
要动态查找到这个类并修改里面的属性.
我找到的操作方法是使用dom的styleSheets集合。
先在页面加上
<link rel="stylesheet" type="text/css" href="abc.css" />
然后调用document.styleSheets[0]得到这个css文件的引用，再根据一些子属性可以定位到这个 .class1{}
但怎么把他的内容修改呢？
这样取得引用好像是不能修改原文件的，有没有像导入xml文件那样的方法呢？
问题点数：20 回复次数：12 显示所有回复显示星级回复显示楼主回复 修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
s_liangchao1s
求学(思考才是进步的本质)
等级:
可用分等级：富农
总技术专家分：16083
总技术专家分排名：900
3
发表于：2008-05-29 18:34:221楼 得分:0
abc.css
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="abc.css" />
<TITLE> New Document </TITLE>
<script>
window.onload=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
</script>
</HEAD>
<BODY>
<div class="class1">aaa</div>
</BODY>
</HTML>
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
btbtd
千君万码 - 君临天下 http://www.btbtd.org/
等级:
可用分等级：中农
总技术专家分：8229
总技术专家分排名：2368
发表于：2008-05-29 23:03:002楼 得分:20
这个问题大麻烦..
如果是在 style 里还容易点
在 link 里, IE里可以很容易解决, 在FF里只能遍历...
一个参考函数
1. Test.html
2. Style.css
1. Test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template </title>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Style.css" id="LinkStyle" />
<div class="Changed">
<dl id="category_1_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_2_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_3_box">
<dd value="0">请选择 </dd>
</dl>
<dl id="category_4_box">
<dd value="0">请选择 </dd>
</dl>
</div>
<br clear="both" />
<div style="color:#ccc; padding:5px 2px; clear:both;">
您当前选择的是:
<span id="ProductCatStatus"> </span>
</div>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[*/
var LinkStyle =document.getElementById("LinkStyle");
fReplaceLinkStyle(LinkStyle, "CatShow", "Changed", true);
function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact)
{/* shawl.qiu code, void return */
var sExact = "";
if(bExact) sExact = "\\b";
var Re = new RegExp(sExact+sFind+sExact, "g");
if(LinkStyle.sheet)/* firefox */
{
var Rules = LinkStyle.sheet.cssRules;
var Len = Rules.length;
for(var i =0; i <Len; i++)
{
var Item = Rules.item(i);
if(typeof Item.selectorText!="undefined")
{
if(Re.test(Item.selectorText))
{
LinkStyle.sheet.insertRule(Item.cssText.replace(Re, sReplace), Len++);
}
}
}
for(var i=Len-1; i>=0; i--)
{
var Item = Rules.item(i);
if(typeof Item.selectorText!="undefined")
{
if(Re.test(Item.selectorText))
{
LinkStyle.sheet.deleteRule(i);
}
}
}
}
else
{
LinkStyle.styleSheet.cssText = LinkStyle.styleSheet.cssText.replace(Re, sReplace);
}
}/* function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact) */
function fTestFunc(XObj)
{/* shawl.qiu code, void return */
var Ar = [];
for(var i in XObj)
{
Ar.push(i.fontcolor("blue")+": "+XObj[i]);
}
var div = document.createElement("div");
with(div.style)
{
margin = "10px;";
padding = "5px;"
border = "1px solid blue";
}
div.innerHTML = Ar.join(" <br/>");
document.body.appendChild(div);
}/* function fTestFunc(XObj) */
/*]]>*/
</script>
</body>
</html>
2. Style.css
.CatShow
{
}
.CatShow dl
{
float:left;
margin:0px 2px;
border:1px solid #ccc;
padding:0px;
width:200px;
height:277px;
overflow:hidden;
overflow-y:scroll;
}
.CatShow dl dd
{
margin:0px;
padding:2px;
display:block!important;
width:180px;
}
.CatShow dl .HasItem
{
background:transparent url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
display:block;
width:180px;
}
.CatShow dl .CurCat
{
background:#CAFFC0;
border:1px solid #ccc;
display:block;
width:180px;
}
.CatShow dl .CurCat_HasItem
{
border:1px solid #ccc;
background:#CAFFC0 url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
display:block;
width:180px;
}
#ProductCatStatus
{
color:black;
font-weight:bold;
}
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:22:203楼 得分:0
谢谢两位，基本和我已经用上的方法差不多。
可能我没问清楚，就是说在js里把这个引用到的样式表修改后，要传给底层服务器端将修改后的样式保存到css文件，要怎么操作，如果是xml的话，通过dom操作可以直接传，但样式表要怎么传呢？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:22:454楼 得分:0
谢谢两位，基本和我已经用上的方法差不多。
可能我没问清楚，就是说在js里把这个引用到的样式表修改后，要传给底层服务器端将修改后的样式保存到css文件，要怎么操作，如果是xml的话，通过dom操作可以直接传，但样式表要怎么传呢？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 09:30:115楼 得分:0
另外想问问，要去修改css文件，只能把它link进来再去取link里的引用么？总觉得拐了弯子。。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
wwy520
天使软件
等级:
可用分等级：长工
总技术专家分：81
总技术专家分排名：103463
发表于：2008-05-30 09:53:296楼 得分:0
该回复于2008-05-30 11:07:56被版主删除
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 10:55:387楼 得分:0
再请教一下
如下这个css：
.topSpace
{width:100%;height:9px;clear:both;}
用 .style.cssText 取得整段样式内容，
在firefox下按原文输出：width:100%;height:9px;clear:both;
在IE下顺序作了变动(按什么排的还没搞清...)，而且属性名为大写：CLEAR: both; WIDTH: 100%; HEIGHT: 9px
有简单的办法保持一致吗？难道要一个个属性取出来作处理？
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yugiking
等级:
可用分等级：贫农
总技术专家分：37
总技术专家分排名：142410
发表于：2008-05-30 11:52:218楼 得分:0
5楼的问题补充一下，不能修改帖子还真不方便。。
是这样的，我想在那个页面里这个css文件进行操作，但不想让页面使用这个css文件里的样式，如果用link指令包进来的话，页面就会使用这个样式了。。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
test33
隐姓埋名
等级:
可用分等级：富农
总技术专家分：574
总技术专家分排名：29282
发表于：2008-05-30 17:57:479楼 得分:0
classname=XXX
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
kingwolf_JavaScript
浴火凤凰
等级:
可用分等级：掌柜
总技术专家分：3998
总技术专家分排名：5173
发表于：2008-06-01 14:38:3010楼 得分:0
学习。
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
yxtyxt3311
韬
等级:
可用分等级：贫农
总技术专家分：142
总技术专家分排名：72814
发表于：2008-06-10 10:04:4711楼 得分:0
.class1{}
.class2{}
document.getElementById("name").classname="class1";
document.getElementById("name").classname="class2";
修改 删除 举报 引用 回复
加为好友
发送私信
在线聊天
dh20156
风之石
等级:
可用分等级：中农
总技术专家分：36978
总技术专家分排名：244
发表于：2008-06-10 10:25:5112楼 得分:0
JS当然不能修改并保存原始文件，它只能做到在DOM中修改并应用这些修改，要保存文件还是靠服务端来实现吧。
加支付宝好友偷能量挖...
