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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQuery设计思想
Mar 07 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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自毁程序(慎用)
2015/07/09 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
transform python环境快速配置方法
2018/09/27 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 经典数字滤波实例
2019/12/16 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
医院辞职信范文
2014/01/17 职场文书
竞聘书格式及范文
2014/03/31 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
使用refresh_token实现无感刷新页面
2022/04/26 Javascript