js怎么修改style内部的内容-JavaSript-爱易网页

js怎么修改style内部的内容

日期：2014-05-16　浏览次数：20437 次

js如何修改style内部的内容？
文件中有
<head>
    <style type="text/css" id="theme">
       .skin{
          width:60;color:#ff0000;
       }
       .layout{
          width:260;height:40color:#fff;
       }
    </style>
</head>

请问用JS如何修改.skin{}内部的内容或替换掉整个.skin{} ？？

------解决方案--------------------
有两种办法可以解决这个问题：
第一种用className：



<style type="text/css" id="theme">

    .skin{ width:60px;color:#ff0000; }

    .skin2{ width:80px;color:#008000; }

    .layout{ width:260;height:40px;color:#fff; }

</style>

<div id="test" class="skin">test skin</div>

<script type="text/javascript">

var test = document.getElementById('test');

test.className = 'skin2';

</script>

第二种用cssText:



<style type="text/css" id="theme">

    .skin{ width:60px;color:#ff0000; }

    .skin2{ width:80px;color:#008000; }

    .layout{ width:260;height:40px;color:#fff; }

</style>

<div id="test" class="skin">test skin</div>

<script type="text/javascript">

var test = document.getElementById('test');

test.style.cssText = 'width:50px;color:green';

</script>

------解决方案--------------------
暂没看到有直接修改<style>里类的属性方法。
用test.className= 【重定义节点类名】；element.style.width【重写节点样式】这些只是修改指定节点的样式，但实质还是没修改或者替换<style>里的.skin{}
------解决方案--------------------
通过id移除该style节点
然后用document.createElement('style')创建一个style节点,再用innerHTML插入内容(如xx.innerHTML=".skin{width:90;color:White;}"),然后渲染到页面中就可以了
------解决方案--------------------



var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>

var rule = null;		// [object CSSRule]

if (obj.cssRules){

  rule = obj.cssRules[1];  // 非IE [object CSSRuleList]

} else {

  rule = obj.rules[1];     // IE [object CSSRuleList]

} 

console.log(rule.style.border); // 谷歌浏览器不能输出

rule.style.border = '1px solid #000'

这段代码在FF下是有效的。IE下没测试，复制的上次有个哥们的代码，第一行可以换成你要那个。

我是在firebug的控制台，在本页面，跑的上面的代码，代码运行后符合选择器的所有元素都被加上了边框。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js怎么修改style内部的内容

相关资料更多>

推荐阅读更多>