DOM--5 动态修改样式和层叠样式表
W3C DOM2 样式规范
CSSStyleSheet对象
表示所有css样式表,包括外部link
和嵌入style
的;通过document.styleSheets
属性可以获得文档中CSSStyleSheet对象的列表;其中每个CSSStyleSheet都具有以下属性:
- type: 值始终是text/css;
- disabled: 布尔值,表示相应的样式表是否应用与当前文档(false)还是被禁用(true);
- href: 样式表路径,嵌入的则是null;
- media: 表示样式表应用的目标设备, 中的media属性
- cssRules: 是一个只读的CSSRuleList列表对象,包含样式表中所有的CSSRule对象;
- insertRule(rule, index): 添加新的样式声明;index表示列表对象cssRules的值;
- deleteRule(index), 用于样式表中移除规则;
CSSStyleRule对象
每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象 document.styleSheets[0].cssRule
, 每个对象 document.styleSheets[0].cssRule[0]
有如下属性:
- type, 继承自CSSRule对象的一个属性,对CSSStyleRule类型而言是1;
- cssText: 包含以只付出形式表示的当前状态下的全部规则;如果这些规则被其他DOM方法改变了,那么这个字符串也会相应改变;
- parentStyleSheet: 引用父CSSStyleSheet对象;
- parentRule: 如果规则位于另一个规则中,该属性则引用另一个CSSRule对象;
- selectorText: 包含规则的选择符;
CSSStyleDeclaration对象
这是用的最多的对象,表示一个元素的style属性(内嵌在元素中的值) A.$('a').style
- cssText:包含以字符串形式表示的全部规则;
- parentRule: 讲引用CSSStyleRule对象;
- getPropertyValue(propertyName), 返回一个字符串形式的CSS样式属性值;
- removeProperty(propertyName), 从声明中移除特定的属性;
- setProperty(propertyName, value, priotity), 用于设置特定css属性的值;
把样式置于DOM脚本之外
style属性
注意通过此属性只能访问到在元素的style属性中以嵌入方式声明的css属性,无法访问层叠样式表或从父类继承的属性
- element.style.setProperty('background-color','red'); //在ie8及以下无效
- element.style.backgroundColor = 'red';//都有效
style引用的是HTMLElement对象的style属性,本身是CSSStyleDeclaration对象;一般使用第一种并兼容第二种
基于className切换样式
- element.setAttribute('class','newClassName'); //在ie8及以下无效
- element.className = 'newClassName'; //都有效
className引用的是HTMLElement对象的class属性,兼容性考虑一般用第二种方法
切换样式表
- 使用备用的样式表
常用属性
* type
* href
* media
* rel, 表示样式表于文档之间的关系* 设置'stylesheet' 指定一个样式表立即应用到文档* 设置'alternate stylesheet' 将其作为备用样式表;浏览器载入该样式表时会将其disbaled设置为true;
* disabled, 表示样式表是否起作用
* title, 标题,也在脚本中用到;
通过js操作disabled值改变样式
- 切换body元素的className
先用设置公用样式,然后分别设置body.a;body.b等及下面的元素样式;最后通过改变body的classname来改变样式
- 动态载入和移除样式表
直接通过js删减样式表
修改css规则
- document.styleSheets能获得所有内嵌和外链的样式表,可以通过href判断
访问计算样式
DOM2样式规范在document.defaultView中包含了一个getComputedStyle()方法;返回一个只读的CSSStyleDeclaration对象
var elemet = A.$('example');
var styles = document.defaultVIew.getComputedStyle(element);
var color = styles.getProperty('background-color');
简单的渐变效果
function fadeColor(from ,to ,callback , duration, framesPerSecond) {function doTimeout(color, frame) {setTimeout(function() {try{callback(color);} catch(e) {A.log.write(e);}}, (duration * 1000 / framesPerSecond) * frame );}var duration = duration || 1;var framesPerSecond = framesPerSecond || duration * 15;var r, g ,b;var frame = 1;doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);while(frame < framesPerSecond + 1) {r = Math.ceil(from.r * ((framesPerSecond - frame) / framesPerSecond) + to.r * (frame / framesPerSecond));g = Math.ceil(from.g * (framesPerSecond - frame) / framesPerSecond + to.g * (frame / framesPerSecond));b = Math.ceil(from.b * ((framesPerSecond - frame) / framesPerSecond) + to.b * (frame / framesPerSecond));doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame);frame++;}}
fadeColor({r:0, g:255, b:0}/*开始颜色*/, {r: 255, g:255, b:255}/*结束颜色*/, function(color) {A.setStyleById('style', {'background-color': color})
});
转载于:https://www.cnblogs.com/jinkspeng/p/4270544.html
DOM--5 动态修改样式和层叠样式表相关推荐
- 微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- 微信小程序动态修改样式
前言 微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式 一.wxml <view class="fb_tips"wx:for="{{arr11 ...
- uniapp动态修改样式_uniapp样式动态绑定
场景一:用户点击按钮后动态切换按钮选中样式(如图) 已上线 未开始 //选择状态 selectState(e){ this.whichSelected=e.currentTarget.dataset. ...
- uniapp动态修改样式_掌握Photoshop图层样式技术
凹凸贴图效果 "等等,什么?" 您会惊叹:""图层样式"菜单中没有凹凸贴图效果!" 的确如此,但是通过将"图案覆盖"和& ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
- 根据条件动态修改element 组件深层次样式
开发前提: vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会 ...
- 动态修改el-input样式;动态修改elmentUI元素样式;css变量
场景:正常我们动态修改div元素的样式,使用:style和:class即可:但是我们想要动态修改element的组件样式时候,例如el-input字体颜色,由于el-input的样式嵌套很深,我们需要 ...
- 前端入门篇(四十一)JS基础8动态修改网页内容(DOM操作)
基本概念: 1.DOM操作:JS动态修改网页内容 2.DOM树: 将html文件转换为机器能看得懂的数据结构: 包含document文档节点.标签节点.text文本节点.comment注释节点等: d ...
- javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
最新文章
- huffman树和huffman编码
- 使用php需要网络吗,使用php获取网络文件
- Nature Genetics:每年造成7亿人感染的酿脓链球菌的致病机制
- 如何在PHP中获取客户端IP地址[重复]
- linux c/c++
- 开关电源雷击浪涌整改_大佬多年经验总结,开关电源EMI整改策略
- Android串口编程--开关灯Demo(附源码)
- 得到进程id_搞懂进程组、会话、控制终端关系,才能明白守护进程干嘛的?
- 容器编排技术 -- Kubernetes kubectl 与 Docker 命令关系
- E站账号cookie分享_58云账号跨域实践总结
- 处理器管理与进程调度
- SLAM_数据集_EuRoC数据集简介与使用
- 进入docker容器中查看文件夹_理解 docker 容器中的 uid 和 gid
- 算法导论———归并排序(JAVA、Python)
- border-color属性设置单边边框和综合四边边框颜色
- 有赞宣布收费,免费模式在移动电商时代真走不通?
- pascal voc2012数据集与主机制作数据集(目标检测篇)
- 从键盘输入一个不多于3位的正整数,要求:求出它是几位数;分别打印出每一位数字;按逆序打印出各位数字
- 色环电阻的电阻值大小的确定
- 2020 CCPC - 网络选拔赛 签到计划