JS 控制CSS样式表

下面先记录一下JS控制CSS所使用的方法.

1.使用javascript更改某个css class的属性...

<style type="text/css">
.orig {
display: none;
}
</style>
你想要改变把他的display属性由none改为inline。
解决办法: 在IE里:

document.styleSheets[0].rules[0].style.display = "inline";
在firefox里:

document.styleSheets[0].cssRules[0].style.display = "inline";
讨论: 可以做一个函数来搜索特定名字的style对象:

function getstyle(sname) {
for (var i=0;i<document.styleSheets.length;i++) {
var rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
} else {
rules = document.styleSheets[i].rules;
}
for (var j=0;j<rules.length;j++) {
if (rules[j].selectorText == sname) {
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正
return rules[j].style;
}
}
}
}
然后只要:

getstyle(".orig").display = "inline";
就可以了。
------------------ 注意 document.styleSheets[0].rules[0].style 这个 styleSheets[0]数组的下标是代表本页的第N个CSS样式表,它的下级rules[0]的数组下标表示的则是这个样式表中的第N个样式,例如:
<style type="text/css">
.s{display="none";}
.w{display="none";}
</style>
修改S则: document.styleSheets[0].rules[0].style.display='inline';
修改W则:document.styleSheets[0].rules[1].style.display = 'inline';
注意:CSS和HTML结合的方式必须为<LINK rel="stylesheet" type="text/css" href="" /> 或<style></style>的时候以上方法可行,如@IMPORT 则不行.
====================================
下面记录一下JS访问CSS中的样式:
用javascript获取和设置style
DOM标准引入了覆盖样式表的概念,当我们用document.getElementById("id").style.backgroundColor 获取样式时 获取的只是id中style属性中设置的背景色,如果id中的style属性中没有设置background-color那么就会返回空,也就是说如果id用class属性引用了一个外部样式表,在这个外部样式表中设置的背景色,那么不好意思document.getElementById("id").style.backgroundColor 这种写法不好使,如果要获取外部样式表中的设置,需要用到window对象的getComputedStyle()方法,代码这样写window.getComputedStyle(id,null).backgroundColor
但是兼容问题又来了,这么写在firefox中好使,但在IE中不好使
两者兼容的方式写成
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
如果是获取背景色,这种方法在firefox和IE中的返回值还是不一样的,IE中是返回"#ffff99"样子的,而firefox中返回"rgb(238, 44, 34) "
值得注意的是:window.getComputedStyle(id,null)这种方式不能设置样式,只能获取,要设置还得写成类似这样id.style.background="#EE2C21";
在IE中CURRENTSTYLE只能以只读方式获取样式.

本文只为学习,摘录了网络搜索资料结合而成,无任何版权,可以任意转载,如原作者有不同想法,可随时联系我.

用JavaScript修改CSS属性

只有写原生的javascript了。

1.用JS修改标签的 class 属性值:

class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。

更改一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。

举例:

代码如下:

<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临!</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

2.用JS修改标签的 style 属性值:
style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的 CSS 属性值也就改变了,所以这属于第二种修改方法。

更改一个标签的 CSS 属性的代码是:

document.getElementById( id ).style.属性名 = 值;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。

说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。

举例:

代码如下:

div id="t2">欢迎光临!</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>
<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>

(0)

相关推荐

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • js控制CSS样式属性语法对照表

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}. 下面就是JS 控制CSS样式表的语法对照: CSS语法 (不区分大小写) JavaScript语法 (区分大小写)  border border  border-bott

  • JS控制CSS样式的方法

    群里的兄弟问的效果 无标题文档 p.p1{ background-color:#FF0000;font-size:22px;_ font-family:"方正舒体"; font-weight:100; } function remove(){ var wc = document.styleSheets[0], i; for (i = 0 ; i hello,this is a example of stylesheets hello,this is a example of style

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • 用JavaScript动态建立或增加CSS样式表的实现方法

    1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ; //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

  • 如何用JavaScript实现动态修改CSS样式表

    看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

  • 网页编辑中CSS样式表技巧总结

    一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

  • CSS样式表规划与管理的经验总结

    彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了.一年多的实践也积累了一定的经验,现在写这篇文章来总结一下.在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理. 我的CSS管理进化史 在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼.那个时候,一个网站所有的CSS都在一个文件中,没

随机推荐