(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;"
);
- 使用 .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
- 如果该 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
里使用
- 注意,如果插入位置大于现有规则的数目,会报错
- 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)"
- 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)"
- 属性返回一个字符串,表示对应的 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第 ...
随机推荐
- Entity Framework入门教程(15)---DbContext追踪实体状态改变
这一节介绍DbContext追踪实体的变化.EF支持DbContext在其生命周期中自动追踪加载的实体.我们可以通过DbChangeTracker类获取DbContext追踪的所有实体的变化. 注意每 ...
- 第十一节:基于MVC5+Spring.Net+EF+Log4net 传统的一种搭建模式
- JDBC Template
JDBC Template 1. Spring JDBC Spring框架对JDBC的简单封装,提供了一个JDBCTemplate对象用来简化JDBC的开发 步骤: 导入jar包 创建JDBCTemp ...
- JGUI源码:解决手机端点击出现半透明阴影(4)
下面开始进入正题,问题发现与解决 1.According解决手机浏览器点击出现半透明阴影 手机下点击有白色蒙版,原始效果如下,看起来很不协调 2.解决办法:增加 -webkit-tap-highlig ...
- [物理学与PDEs]第3章第2节 磁流体力学方程组 2.2 考虑到电磁场的存在对流体力学方程组的修正
1. 连续性方程 $$\bex \cfrac{\p \rho}{\p t}+\Div(\rho{\bf u})=0. \eex$$ 2. 动量守恒方程 $$\bex \cfrac{\p }{\p ...
- python 列表 元组 字典 集合
列表 lst = [i for i in range(10)] 切片 # 把下标小于2的显示出来 print(lst[:2]) # 把10个数有大到小输出 print(lst[::-1]) # 把下标 ...
- PowerDesigner的Table视图同时显示Code和Name的方法[转发]
PowerDesigner中Table视图同时显示Code和Name,像下图这样的效果: 实现方法:Tools-Display Preference
- upgrade openssl
01 OpenSSL version wiki:https://en.wikipedia.org/wiki/OpenSSL 02 Using TLS1.3 With OpenSSL https:// ...
- Nikto and whatweb
root@kali:~# nikto -host www.baidu.com- Nikto v2.1.6------------------------------------------------ ...
- hdu3709 数位dp
枚举fix所在的位置loc即可,然后数位dp即可 这题要注意一种特殊情况,就是所有位都是0的时候对于每个fix都是成立的 /* dp[i][j][k]表示前i位确定了平衡点在第j位,前i位和为k fi ...