javascript 动态修改样式和层叠样式表代码


Posted in Javascript onApril 27, 2010

W3C DOM2样式规则
==========================================================
CSSStyleSheet对象
  CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条规则。

通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表,其中每个对象有下列属性

type

始终为text/css

disabled

相应样式表是应于还是禁用于当前文档
  href

样式表相对于当前文档的URL

title

分组样式标签

media

样式应用的目标设备类型(screen、print)

ownerRule

只读CSSRule对象,若样式用@import导入,表示其父规则

cssRules

 只读cssRuleList列表对象,包含样式表中所有CSSRule对象

==========================================================

insertRule(rule,index)

添加新的样式声明

deleteRule(index)

  从样式表中移除规则
CSSStyleRule对象

每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则:

boyd{
 

font:lucida,verdana,sans-serif;

background:#c7600f;

color:#1a3800;

}
CSSStyleRule对象具有下列属性:

type

继承自CSSRule对象的一个属性,以0~6中的一个数字表示规则类型

cssText

以字符串形式表示的当前状态下的全部规则

parentStyleSheet

引用父CSSStyleRule对象

parentRule

  如果规则位于另一规则中,该属性引用另一个CSSRule对象

selectorText

包含规则的选择符

style

与HTMLElement.style相似,是CSSStyleDeclaration对象的一个实例
CSSStyleDeclaration对象

表示一个元素的style属性,与CSSStyleRule对象类似,CSSStyleDeclaration具有下面属性:

cssText

以字符串形式表示的全部规则

parentRule

将引用CSSStyleRule对象

==========================================================

getPropertyValue(propertyName)

CSS样式属性值

removeProperty(propertyName)

从声明中移除属性

setProperty(propertyName,value,priority)

设置CSS属性值
把样式置于DOM脚本之外
=========================================================
style属性

style属性本身是一个表示特定元素的所有不同CSS样式的CSSStyleDeclaration对象,通过style属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说,通过style属性无法访问到由多重样式表层叠而来或者从父元素继承的CSS属性。

element.style.backgroundColor = 'red';//background-color被转换为大小写形式,必须的 
//设置id为"example"的元素的样式 
setStyleById('example',{ 

'background-color' 
: 
'red', 

'border'


 :
'1px solid black', 

'padding'


 :
'1px', 

'margin'


 :
'1px' 
}); 
function setStyle(elementid,styles){  

var element = document.getElementById(elementid); 

//循环遍历styles对象并应用每个属性 

for(property in styles){ 


//非styles直接定义的属性 


if(!styles.hasOwnProperty(property)) continue; 


 


if(element.style.setProperty){ 



element.style.setProperty(uncamlize(property, '-'), styles[property], null); 


} else { 



element.style[camelize(property)] = styles[property]; 


} 

} 

 

return true; 
} 
//将word-word转换为wordWord 
function camelize(s) { 
return s.replace(/-(\w)/g, function(math,p1){ 
return p1.toUpperCase(); 
}); 
} 
//将wordWord转换为word-word 
function uncamelize(s, sep) { 
sep = sep || '-'; 
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){ 
return p1 + sep + p2.toLowerCase(); 
}); 
} 
//基于className切换样式 
element.className += 'newclass';

访问计算样式

在修改一个元素的表现之前,你可能希望首先确定它当前的样式属性,由于元素的style属性只适用于以嵌入式方式定义的样式,因此无法通过style取得计算样式,DOM2规范在document.defaultView中包含一个名叫getComputedStyle()的方法,该方法返回一个只读的CSSStyleDeclaration对象,包含特定元素的所有计算样式,如下:

var styles = document.defaultView.getComputedStyle(element); 

var color = styles.getProperty('background-color');

但是Microsoft有自己的属性element.currentStyle版本
//取得一元素的计算样式 
function getStyle(element,property) { 
var value = element.style[camelize(property)]; 

if(!value) { 


if(document.defaultView && document.defaultView.getComputedStyle) { 



value = document.defaultView.getComputedStyle(element).getPropertyValue(property); 


} else if(element.currentStyle) { 



value = element.currentStyle[camelize(property)]; 

 
} 

} 

return value; 
}
Javascript 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 #Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 #Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 #Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 #Javascript
jQuery 表格工具集
Apr 25 #Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 #Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
浅谈js原生拖放
2016/11/21 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
门卫工作岗位职责
2013/12/17 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
货车司机岗位职责
2014/03/18 职场文书
献爱心标语
2014/06/21 职场文书
北京天坛导游词
2015/02/12 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
MySQL三种方式实现递归查询
2022/04/18 MySQL
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android