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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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获取数组中键值最大数组项的索引值
2015/03/17 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python实现自动解数独小程序
2019/01/21 Python
简单了解python单例模式的几种写法
2019/07/01 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
致标枪运动员加油稿
2014/02/15 职场文书
个人授权委托书范本
2014/04/03 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
商铺消防安全责任书
2014/07/29 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis