(90)Wangdao.com第二十三天_JavaScript CSS 操作
CSS 操作
通过 JavaScript 操作 CSS
- HTML 元素的 style 属性
- <div style="background-color:red; border:1px solid black;" />
- 使用 .getAttribute() 方法、.setAttribute() 方法和 .removeAttribute() 方法,直接读写或删除网页元素的 style 属性
- div.setAttribute("style'",
- "background-color:red; border:1px solid black;"
- );
- div.setAttribute("style'",
- 使用 .getAttribute() 方法、.setAttribute() 方法和 .removeAttribute() 方法,直接读写或删除网页元素的 style 属性
- style 属性的值是一个 CSSStyleDeclaration 实例,用来操作元素的样式,不过,连词号需要变成骆驼拼写法
- 操作属性时的规则
- 将横杠从 CSS 属性名中去除,然后将横杠后的第一个字母大写
- 对象的属性值都是字符串,设置时必须包括单位
- 如果 CSS 属性名是 JavaScript 保留字,则规则名之前需要加上字符串 css
- ele.style.backgroundColor // 对应css 属性 background-color
- ele.style.cssFloat // 对应 css 属性 float
- 注意:
- Element.style返回的只是行内样式,并不是该元素的全部样式。
- 元素的全部样式要通过 window.getComputedStyle(obj, null)["attr"] 得到。(IE8 下使用ele.currentStyle["attr"])
- 操作属性时的规则
- ele.style.实例属性
- ele.style.cssText
- 读写元素的所有行内样式,以字符串形式返回
- 不用改写 CSS 属性名
- 清空元素的行内样式,最简便的方法就是设置 cssText 为空字符串
<div id="ele" style="background:yellow"></div>
ele.style.cssText; // 返回字符串 "background:yellow"
ele.style.cssText = ""; // 清空行内样式
- ele.style.cssText
- ele.style.实例属性
- ele.style.length
- 返回一个整数值,表示元素行内样式包含多少条样式声明
- ele.style.length
- ele.style.parentRule
- 返回当前规则所属的那个样式块(CSSRule 实例)。如果不存在所属的样式块,该属性返回 null
- ele.style.parentRule
- 属性只读,且只在使用 CSSRule 接口时有意义
- ele.style.实例方法
- ele.style.getPropertyPriority()
- 判断元素的某个属性是否加了 important 优先级
- 以某个属性名作为参数,返回一个字符串
- 如果该属性设置了 important,则返回 "important"
- 否则返回空字符串 ""
- ele.style.getPropertyPriority()
- ele.style.实例方法
- ele.style.getPropertyValue()
- 返回元素某属性的属性值
- 以某属性名为参数,返回一个字符串
- ele.style.getPropertyValue()
- ele.style.item()
- 接受一个整数值作为参数,返回该索引位置的 CSS 属性名
- ele.style.item()
- ele.style.removeProperty()
- 删除行内式某属性,返回被删除属性的旧属性值
- ele.style.removeProperty()
- ele.style.setProperty(属性名,属性值,优先级)
- 设置新的 CSS 属性。没有返回值
- 优先级可选,唯一合法值:improtant
- ele.style.setProperty(属性名,属性值,优先级)
- CSS 模块的侦测
判断当前浏览器是否支持某个模块
- element.style.attrName 的返回值
- 如果该 CSS 属性确实存在
- 会返回一个字符串
- 即使该属性实际上并未设置,也会返回一个空字符串
- 如果该属性不存在,则会返回 undefined
- 侦测方法1
- typeof element.style.attrName === 'string';
- // 注意,不管 CSS 属性名的写法带不带连词线,
style
属性上都能反映出该属性是否存在ele.style['backgroundColor'] // "" === "string" 返回 true
document.body.style['background-color'] // "" === "string" 返回 true
//
使用的时候,需要把不同浏览器的 CSS 前缀也考虑进去
ele.style['-webkit-animation'] === 'string'
- 封装该侦测方法
- function isPropertySupported(cssPropStr) {
- if (cssPropStr in document.body.style){
- return true;
- }
- var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
- var prefProperty = cssPropStr.charAt(0).toUpperCase() + cssPropStr.substr(1);
- for(var i = 0; i < prefixes.length; i++){
- if((prefixes[i] + prefProperty) in document.body.style){
- return true;
- }
- }
- return false;
- }
- isPropertySupported('background-clip'); // true
- function isPropertySupported(cssPropStr) {
- 如果该 CSS 属性确实存在
- element.style.attrName 的返回值
- 浏览器原生提供 CSS 对象,目前有两个静态方法
- CSS.escape()
- 转义 CSS 选择器里面的特殊字符
- document.querySelector('#' + CSS.escape('foo#bar'));
- // #号,该字符在 CSS 选择器里面有特殊含义
- // 不能直接写成 document.querySelector('#foo#bar')
- // 只能写成 document.querySelector('#foo\\#bar') // 这里必须使用双斜杠的原因是,单引号字符串本身会转义一次斜杠
- 转义 CSS 选择器里面的特殊字符
- CSS.escape()
- CSS.supports()
- 判断当前环境是否支持某一句 CSS 样式
- 参数有两种写法
- 第一个参数是属性名,第二个参数是属性值
- // 第一种写法
- CSS.supports('transform-origin', '5px'); // true
- // 第一种写法
- 整个参数就是一行完整的 CSS 语句
- // 第二种写法
- CSS.supports('display: table-cell'); // true
- // 第二种写法
- 注意,第二种写法的参数结尾不能带有分号
- 第一个参数是属性名,第二个参数是属性值
- CSS.supports()
- 高级浏览器 window.getComputedStyle()
- 获取元素的实际样式,浏览器计算后得到的最终样式信息
- 注意:
- CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。
- 比如,长度都是像素单位(返回值包括px后缀),颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
- CSS 规则的简写形式无效。
- 比如,想读取 margin 属性的值,不能直接读,只能读 marginLeft、marginTop 等属性;
- 再比如,font 属性也是不能直接读的,只能读 font-size 等单个属性。
- 如果读取 CSS 原始的属性名,要用方括号运算符,比如 ele.style['z-index'];
- 如果读取骆驼拼写法的 CSS 属性名,可以直接读取 ele.style.zIndex。
- 该方法返回的 CSSStyleDeclaration 实例的 cssText 属性无效,返回 undefined
- CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。
- 它接受一个节点对象作为参数,返回一个 CSSStyleDeclaration 实例(动态对象,只读)
- 还可以接受第二个参数,表示当前元素的伪元素(比如 :before、:after、:first-line、:first-letter 等)
- var result = window.getComputedStyle(ele, ':before')["background"];
- 还可以接受第二个参数,表示当前元素的伪元素(比如 :before、:after、:first-line、:first-letter 等)
- CSS 伪元素
通过 CSS 向 DOM 添加的元素
主要是通过 :before 和 :after 选择器生成,然后用 content 属性指定伪元素的内容
- // <div id="test">Test content</div>
- #test:before {
- content: 'Before ';
- color: #FF0;
- }
- var test = document.getElementById('#test');
- // 节点元素的 style 对象无法读写伪元素的样式
- var result = window.getComputedStyle(test, ':before').content;
- var color = window.getComputedStyle(test, ':before').color;
- StyleSheet 对象
代表网页的一张样式表,包括行内样式表,内部样式表,外部样式表
严格来说,不仅包括网页样式表,还包括 XML 文档的样式表
document.styleSheets 返回一个类似数组的对象,代表当前页面的所有 StyleSheet 实例(即所有样式表)
- 如果是 <style> 元素 的内部样式表,还可以通过 style 元素节点 sheet 属性获取 StyleSheet 对象
- // <style id="myStyle">
- // </style>
- var myStyleSheet = document.getElementById('myStyle').sheet;
- myStyleSheet instanceof StyleSheet; // true
- 如果是 <style> 元素 的内部样式表,还可以通过 style 元素节点 sheet 属性获取 StyleSheet 对象
- StyleSheet 的实例属性
- StyleSheet.disabled
- 表示该样式表是否处于禁用状态,为 true 时,目标样式不会生效
- 注意,disabled 属性只能在 JavaScript 脚本中设置,不能在 HTML 语句中设置
- StyleSheet.disabled
- StyleSheet 的实例属性
- Stylesheet.href
- 返回样式表的网址。
- 对于内嵌样式表,该属性返回 null
- 属性只读
- document.styleSheets[0].href
- Stylesheet.href
- StyleSheet.media
- 返回一个类似数组的对象(MediaList实例),成员是表示适用媒介的字符串。
- 表示当前样式表是用于屏幕(screen),还是用于打印(print)或手持设备(handheld),或各种媒介都适用(all)
- 该属性只读,默认值是 screen
- MediaList.appendMedium(),用于增加媒介
- MediaList.deleteMedium(),用于删除媒介
- StyleSheet.media
- StyleSheet.cssRules
- 指向一个类似数组的对象(CSSRuleList实例),里面每一个成员就是当前样式表的一条 CSS 规则
- StyleSheet.cssRules
- 实例方法
- CSSStyleSheet.insertRule()
- 用于在当前样式表的插入一个新的 CSS 规则
- CSSStyleSheet.insertRule()
- 第一个参数是表示 CSS 规则的字符串,这里只能有一条规则,否则会报错。
- 第二个参数是该规则在样式表的插入位置(从0开始),该参数可选,默认为0(即默认插在样式表的头部)。
- 注意,如果插入位置大于现有规则的数目,会报错
- var sheet = document.querySelector('#styleElement').sheet;
- sheet.insertRule('#block { color: white }', 0);
- sheet.insertRule('p { color: red }', 1);
浏览器对脚本在样式表里面插入规则有很多限制。所以,这个方法最好放在
try...catch
里使用 - var sheet = document.querySelector('#styleElement').sheet;
- 注意,如果插入位置大于现有规则的数目,会报错
- CSSRule 实例的属性
- CSSRule.cssText
- CSSRule.parentStyleSheet
- CSSRule.parentRule
- CSSRule.type 表示当前样式规则的类型
- 1 普通样式规则(CSSStyleRule 实例)
- 3 @import规则
- media 属性 返回代表@media规则的一个对象
- conditionText 属性 返回
@media
规则的生效条件- // HTML 代码如下
- // <style id="myStyle">
- // @media screen and (min-width: 900px) {
- // article { display: flex; }
- // }
- // </style>
- var styleSheet = document.getElementById('myStyle').sheet;
- styleSheet.cssRules[0] instanceof CSSMediaRule
- // true
- styleSheet.cssRules[0].media
- // {
- // 0: "screen and (min-width: 900px)",
- // appendMedium: function,
- // deleteMedium: function,
- // item: function,
- // length: 1,
- // mediaText: "screen and (min-width: 900px)"
- // }
- styleSheet.cssRules[0].conditionText
- // "screen and (min-width: 900px)"
- // HTML 代码如下
- 4 @media规则(CSSMediaRule 实例)
- 5 @font-face规则
- window.matchMedia()
- 创建
MediaQueryList
对象来存放媒体查询的结果 - 用来将 CSS 的 MediaQuery 条件语句,转换成一个 MediaQueryList 实例
- 设置一个查询列表用来判定设备屏幕处于横屏还是竖屏
- var mql = window.matchMedia("(orientation: portrait)");
- 设置一个查询列表用来判定设备屏幕处于横屏还是竖屏
- mql.media
- 属性返回一个字符串,表示对应的 MediaQuery 条件语句
- var mql = window.matchMedia('(min-width: 400px)');
- mql.media // "(min-width: 400px)"
- var mql = window.matchMedia('(min-width: 400px)');
- 属性返回一个字符串,表示对应的 MediaQuery 条件语句
- 创建
- mql.matches
- 返回一个布尔值,表示当前页面是否符合指定的 MediaQuery 条件语句
- 通过检查相应查询的 matches 属性来获取查询结果,上述属性会直接返回查询结果
- 下面的例子根据 mediaQuery 是否匹配当前环境,加载相应的 CSS 样式表
- var result = window.matchMedia("(max-width: 700px)");
- if (result.matches){
- var linkElm = document.createElement('link');
- linkElm.setAttribute('rel', 'stylesheet');
- linkElm.setAttribute('type', 'text/css');
- linkElm.setAttribute('href', 'small.css');
- document.head.appendChild(linkElm);
- }
- mql.onchange
- 如果 mql 条件语句的适配环境发生变化,会触发 change 事件
- var mql = window.matchMedia('(max-width: 600px)');
- mql.onchange = function(e) {
- if (e.matches) {
- /* 视口不超过 600 像素 */
- } else {
- /* 视口超过 600 像素 */
- }
- }
上面代码中,change事件发生后,存在两种可能。
一种是显示宽度从700像素以上变为以下
另一种是从700像素以下变为以上,
所以在监听函数内部要判断一下当前是哪一种情况
- 如果 mql 条件语句的适配环境发生变化,会触发 change 事件
- mql.matches
- MediaQueryList 接口的实例方法
- MediaQueryList.addListener()
- MediaQueryList.removeListener()
- var mql = window.matchMedia('(max-width: 600px)');
- // 指定监听函数
- mql.addListener(mqCallback);
- // 撤销监听函数
- mql.removeListener(mqCallback);
- function mqCallback(e) {
- if (e.matches) {
- /* 视口不超过 600 像素 */
- } else {
- /* 视口超过 600 像素 */
- }
- }
(90)Wangdao.com第二十三天_JavaScript CSS 操作的更多相关文章
- (75)Wangdao.com第十三天_JavaScript 包装对象
包装对象 所谓“包装对象”,就是分别与数值.字符串.布尔值相对应的Number.String.Boolean三个原生对象 这三个原生对象可以把原始类型的值变成(包装成)对象 var v1 = new ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画 学习目标 熟悉蒙皮动画的术语: 学习网格层级变换 ...
- 《Linux命令行与shell脚本编程大全》 第二十三章 学习笔记
第二十三章:使用数据库 MySQL数据库 MySQL客户端界面 mysql命令行参数 参数 描述 -A 禁用自动重新生成哈希表 -b 禁用 出错后的beep声 -B 不使用历史文件 -C 压缩客户端和 ...
- NeHe OpenGL教程 第二十三课:球面映射
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- javaSE第二十三天
第二十三天 338 1.进程和线程的概述 338 2.多线程(理解) 339 (1)多线程:一个应用程序有多条执行路径 339 (2)Java程序的运行原理及JVM的启动是多线 ...
- Python开发【第二十三篇】:持续更新中...
Python开发[第二十三篇]:持续更新中...
- Gradle 1.12用户指南翻译——第二十三章. Java 插件
其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...
- “全栈2019”Java多线程第二十三章:活锁(Livelock)详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- “全栈2019”Java第二十三章:流程控制语句中决策语句switch上篇
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
随机推荐
- Spark Java API 计算 Levenshtein 距离
Spark Java API 计算 Levenshtein 距离 在上一篇文章中,完成了Spark开发环境的搭建,最终的目标是对用户昵称信息做聚类分析,找出违规的昵称.聚类分析需要一个距离,用来衡量两 ...
- [物理学与PDEs]第2章习题3 Laplace 方程的 Neumann 问题
设 $\Omega$ 为单连通区域, 在其边界 $\vGa$ 上给定向量场 ${\bf u}_B$, 则在 $\bar\Omega$ 中存在速度场 ${\bf u}$, 使其在 $\Omega$ 中成 ...
- UE4 AR开发笔记
1.基础使用 ArToolKit:生成图片特征,可以用彩图.(图片先灰化) genTexData效准相机.由于有的相机照相有弧度. calib_camera 2.使用UE4ARPlugins做 ...
- 【原创】大叔问题定位分享(21)spark执行insert overwrite非常慢,比hive还要慢
最近把一些sql执行从hive改到spark,发现执行更慢,sql主要是一些insert overwrite操作,从执行计划看到,用到InsertIntoHiveTable spark-sql> ...
- windows下安装setuptools与pip
1.下载 setuptools与pip 下载地址如下: https://pypi.Python.org/pypi/setuptools https://pypi.Python.org/pypi/pip ...
- Linux 出现telnet: 127.0.0.1: Connection refused错误解决办法
Linux 出现telnet: connect to address 127.0.0.1: Connection refused错误解决办法 没有xinetd服务: 1./etc/init.d目录中放 ...
- 移动端遮罩及阻止页面滑动,实用!!! 我们经常做一个fixed定位的遮罩和一个提示弹框,这时就要用到。记录--
document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; document.getElementByI ...
- python第六篇文件处理类型
阅读目录 一 文件操作 二 打开文件的模式 三 操作文件的方法 四 文件内光标移动 五 文件的修改 文件处理 ...
- RabbitMQ的Java API编程
1.创建Maven工程,pom.xml引入依赖: <dependency> <groupId>com.rabbitmq</groupId> <artifact ...
- SpringBoot 集成数据库连接池Druid
1.pom.xml依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid< ...