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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
jquery 插件学习(三)
Aug 06 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JavaScript Split()方法
Dec 18 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
jquery 列表双向选择器之改进版
2013/08/09 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
django框架模板语言使用方法详解
2019/07/18 Python
python文字转语音的实例代码分析
2019/11/12 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python不同版本的_new_不同点总结
2020/12/09 Python
外企财务年会演讲稿
2014/01/03 职场文书
饭店工作计划书
2014/01/10 职场文书
高三英语教学反思
2014/01/13 职场文书
工作评语大全
2014/04/26 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Python实现日志实时监测的示例详解
2022/04/06 Python