JavaScript总结(六)
使用DOM操纵样式表
✍ 操纵元素的Style样式属性(所有的均对于CSS的内联式)
对于每个CSS样式,Style对象都包含了一个相对应的属性,只需要用到style属性即可;
Div.style.color= "red"; //给div元素设置字体颜色为红色
对于两个词的样式,在JavaScript样式属性的格式去驼峰命名法;
Div.style.backgroundColor= "#000"; //给div元素设置背景色为黑色
DOM为style对象提供了方法用来与CSS样式定义的单个部分交互
➣ getPropertyValue(propertyName)——返回CSS属性的属性值的字符串。这个propertyName必须是CSS样式中指定的格式;
➣ getPropertyPriority()——如果再CSS属性规则中指定了"!important",则返回字符串"!important",否则返回一个空的字符串;
➣ item(index)——返回指定索引的CSS属性名称;
➣ removeProperty(propertyName)——从CSS定义中删除propertyName。
➣ setProperty(propertyName,value,prioriry)——设置CSS属性propertyName为value以及给定的优先级("important"或者一根空字符串);
✍ 操纵外部样式表以及style元素中的样式
使用document.styleSheets集合,该集合包含了在一个网页所有样式表的应用,也包括所有的style属性。
➣ disabled——表示样式表是否被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表;
➣ href——如果样式表是通过<link>包含的,则是样式表的URL;否则,是null;
➣ media——当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中 特定的项。如果集合是空列表项,表示样式表适用于所有媒体。在IE中,media是一个反映<link>和<style>元素 media特性的字符串;
➣ ownerNode——指定样式表的DOM节点(<link/>或者<style/>元素)。如果当前样式表是其它样式表通过@import导入的,则这个属性值为null。IE不支持这个属性;
➣ parentStyleSheet——如果样式表被包含在CSS@import语句中,本属性指向语句发现的样式;
➣ title——ownerNode中的title属性的值;
➣ type——样式表的mine类型。对CSS样式表而言,通常是“type/css”;
(PS:一条规则上的style对象不是只读的,我们可以更改它。但是更改一条CSS规则会影响页面上所有使用规则的元素)
✍ 操纵最终样式
一个元素可能有多个样式作用于其上,最终在屏幕上显示的样式,我们称为最终样式。最终样式由所有的样式信息(包含内联样式和CSS规则)组成,用来真实指示元素在屏幕是如何显示的(存在兼容性问题,IE和DOM有不同的实现方式);
➣ IE中的最终样式
IE在每个元素上提供了一个currentStyle对象,该对象包含了从元素背景色到任何相关CSS规则的style对象的所有属性。currentStyle对象与style工作方式相同,有同样的属性和方法。
➣ DOM中的最终样式
DOM对于给定的元素提供了一个方法getComputedStyle()来创建一个类似style的对象,例如:hover或者:first-letter(如果不需要,第二个参数可为空)。该方法接收两个参数,一个是要获取样式的元素,一个是伪元素,我们可以从document.defaultView对象访问该方法(IE和Safari浏览器不支持document.defaultView)。
➣ 获取IE和DOM的最终样式(已解决兼容性问题)
var obj = document.getElementById("test"); var style = null; if (window.getComputedStyle) {style = window.getComputedStyle(obj, null); // DOM } else { style = obj.currentStyle; // IE }
转载于:https://www.cnblogs.com/HackerBlog/p/6036241.html
JavaScript总结(六)相关推荐
- Javascript第六章JavaScript字面量加数组创建对象第三课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
- Javascript第六章JavaScript中构造器创建对象第二课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
- Javascript第六章JavaScript用new创建对象第一课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
- JavaScript(六)—— DOM 事件高级
本篇为 JavaScript 系列笔记第六篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程 系列笔记: JavaScript(一)-- 初识JavaScript / ...
- 进击的 JavaScript(六) 之 this
记得刚开始,我理解 this 的时候 也是云里雾里的,哈哈,希望通过这篇文章,对你有帮助吧. 关于 this 最多的说法,就是:谁调用它,this就指向谁.这话呢,不能说它错了,只能说它讲的不严谨,为 ...
- 【Javascript】javascript学习 六 七 JavaScript 变量/运算符
变量是用于存储信息的容器: x=5; length=66.10; 还记得在学校里学过的代数吗? 当您回忆在学校学过的代数课程时,想到的很可能是:x=5, y=6, z=x+y 等等. 还记得吗,一个字 ...
- Javascript第六章基本包装类型第八课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课
元字符: 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们 ...
- Javascript第六章计时器练习【源码】第四课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Javascript第六章闭包closure规则第三课
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- Python3 的多线程使用:_thread,threading,multiprocessing
- 我使出这“三板斧”(分段锁、哈希锁、弱引用锁)灭霸跑了......
- nginx启动只有master没有worker_深入浅出Nginx
- Visual Studio 2012资源管理器里单击打开改为双击打开文件
- 《Python程序设计基础与应用》课后习题答案
- 计算机课堂教育叙事,《我与电脑交朋友》教学反思
- Zookeeper的Leader选举-选举过程介绍比较清晰
- 漂亮easyui皮肤组件html模板,EasyUI美化皮肤主题大包Insdep Theme
- 2019 live tex 发行版_下载和安装Texlive2019
- 怎么给PDF插入一个文本框写注释?PDF添加注释文本框教程
- 树莓派远程连接工具VNC使用教程
- php单位有哪些,css中的角度单位有哪些?
- html li spry,借助于spry实现Tab面板
- 计算机基础操作(计算机硬件知识)
- Android解压apk包
- YJX基础44 __declspec(naked)
- UVA1595(对称轴)
- 点击键盘的return键收回键盘
- python零基础入门教程视频下载-零基础学Python入门教程,视频资源下载
- Pywin32操作Excel数据的类