JS 控制CSS样式表


Posted in Javascript onAugust 20, 2009

下面先记录一下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>
Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
javascript 动态创建表格
Jan 08 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
JS获取父节点方法
Aug 20 #Javascript
javascript 数组排序函数
Aug 20 #Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 #Javascript
JQUERY 浏览器判断实现函数
Aug 20 #Javascript
google地图的路线实现代码
Aug 20 #Javascript
JavaScript 字符串乘法
Aug 20 #Javascript
javascript 短路法代码精简
Aug 20 #Javascript
You might like
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
jquery 插件学习(六)
2012/08/06 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
外企测试工程师面试题
2015/02/01 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
经典演讲稿范文
2013/12/30 职场文书
大学毕业感言200字
2014/03/09 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
社区平安建设方案
2014/05/25 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
投标承诺函范文
2015/01/21 职场文书
阿凡达观后感
2015/06/10 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
SQL Server中锁的用法
2022/05/20 SQL Server