如何用javascript动态修改css文件

最新推荐文章于 2023-12-13 11:06:12 发布

杰克2022

最新推荐文章于 2023-12-13 11:06:12 发布

阅读量1k

点赞数

分类专栏： css js 文章标签： javascript css stylesheet scroll border function

js 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

有一个css文件：abc.css
内容如下：
.class1
{width:10px}

要动态查找到这个类并修改里面的属性.

我找到的操作方法是使用dom的styleSheets集合。

先在页面加上
<link rel="stylesheet" type="text/css" href="abc.css" />
然后调用document.styleSheets[0]得到这个css文件的引用，再根据一些子属性可以定位到这个 .class1{}
但怎么把他的内容修改呢？

这样取得引用好像是不能修改原文件的，有没有像导入xml文件那样的方法呢？

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>

这个问题大麻烦..
如果是在 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;
}

杰克2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用javascript动态修改css文件

有一个css文件：abc.css 内容如下：.class1{width:10px}要动态查找到这个类并修改里面的属性.我找到的操作方法是使用dom的styleSheets集合。先在页面加上然后调用document.styleSheets[0]得到这个css文件的引用，再根据一些子属性可以定位到这个 .class1{}但怎么把他的内容修改呢？这样
复制链接

扫一扫

专栏目录