h5新功能data-*,好好利用,还能做数据双向绑定
标题是data-,但是这里主要讲伪元素,看明白就知道了
1、jQuery Selectors
获取伪元素的属性值
虽然JS里没有可以直接操作伪元素的选择符,然而获取其CSS属性的方法还是有的。
window.getComputedStyle
利用window.getComputedStyle
方法选择到伪元素,然后利用getPropertyValue
方法获取对应的属性的值。
根据MDN的文档,
window.getComputedStyle(element[, pseudoElt]);
此方法包含两个参数,一个是元素本身另一个是元素的伪元素。 js语法实例(完整DEMO在线链接):
var div=document.querySelector('div');var fontSize=window.getComputedStyle(div,'::before').getPropertyValue('font-size');//获取before伪元素的字号大小
关于这个方法,详解可以参考这篇文章: 获取元素CSS值之getComputedStyle方法熟悉
更改伪元素的属性值
window.getComputedStyle
方法虽然可以获取到伪元素的属性值,然而根据该方法名字也知道其只能获取CSS样式,并无法更改css属性,那么如果想要用js动态更改伪元素属性值的话,该怎么处理呢?
思路有以下几个:
- js更改
data-*
属性值来更改伪元素的content
值 - 创建多个
class
,通过切换class
来达到改变样式的目的 - 利用CSSStyleSheet的
insertRule
方法来添加样式 - 利用内部css样式的高优先级来覆盖外部css
以上实现思路的推荐程度依次递减
利用DOM的data-*
属性来更改content
的值
data-*
是HTML5新增的DOM元素属性,作用大致可以理解为标记。具体用法可以参考MDN的这篇文章.而伪元素的content
属性值除了常规赋值外,还有一种特殊的attr()
方法来获取。
HTML:
<div class="test" data-text="TEXT" data-color="red"></div>
CSS:
.test::before{ content: attr(data-text);}
结果:
TEXT
另外content
其实可以多个attr连写,而且attr()内的可以是DOM元素的任意属性(比如class
等,甚至非W3C标准属性也支持,不过不推荐这么做)所以很方便凑一些模版文字。像下面这种写法也是完全没问题的。注意用空格连接,不要用"+"号。
EXAM:
.test::before { content: '我的类是' attr(class) '想要变成' attr(data-color);}
虽然W3C给
attr()
赋予了无限可能性,包括color
,width
等属性在未来都有希望用这个方法更改,然而目前只有content
支持该方法,其余的都还是草稿状态,尚未有浏览器支持。之所以把这个方法放在第一位只是因为相比别的实现手法来说,这个方法真的太简单太优雅。
但是如果真的想要改伪元素里的color
等元素呢?
更改class
来实现伪元素样式的更改
把这个方法放到推荐位第二位估计会被很多人骂我:“卧槽,这么简单又没逼格的办法你竟然放到第二位!太没水平了”。不过再看完后面两种方法后或许你会对这种看法有所改观。
这个方法的优点是简单好用且无兼容性问题。缺点是多了一些其实用处不大的class
,很像是jQuery类选择器中毒患者的做法;另外不适合多状态的场景(比如实时改变伪元素文字大小等)。
实现过于简单就不贴代码了。
前面的class切换大法
可能让人感觉不痛快,这里来个高大上(伪)点的方法:
利用CSSStyleSheet的insertRule
方法来添加样式
这部分内容和W3C标准牵连比较多,加上较冷门,没多少人关注,个人目前啃不动标准,所以这部分内容不会做深入分析,理解可能也会有问题,望斧正。
CSSStyleSheet是浏览器存放页面内所有css样式表的对象方法(不包括行内样式),每个link
和style
标签都代表一个CSSStyleSheet对象,获取他们可以用document.styleSheets
方法。(需要注意的是虽然styleSheets
方法返回的结果把link
标签引进的外部样式也算进去了,但是非IE浏览器没办法获取到他们的cssRules
属性,只有内嵌的style
标签内的元素可以被获取到)
document.styleSheets[0].insertRule('.test::before{color:green}',0)//chrome,firefox等非IE浏览器使用document.styleSheets[0].addRule('.test::before{color:green}',0)//IE系列浏览器使用/* 虽然部分浏览器也可以通过id来指定,'document.styleSheets.id.insertRule()'这种写法在chrome和IE下都行得通,但是firefox会返回'undefined',所以建议还是使用index值来获取stylesheet */
.insertRule
的语法是stylesheet.insertRule(rule, index)
,另一个参数是index
,意思是在对应的styleSheets里的cssRules
样式表中的位置,这个值越大则样式优先级越高,但是值不能超过当前样式表规则(cssRules
)长度(CSS中先定义的样式总是会被后定义的覆盖就是这个缘故。),当值小于cssRules
长度时,添加的样式规则会插入到index
值定义的位置,之前其余的规则依次顺延。
addrule
和insertRule
方法本质上没区别,只是后者不被IE浏览器识别,所以前者作为浏览器兼容方法存在。(下文为节省篇幅,以insertRule
方法指代此两种方法。)
上面的代码看似简单一行,然而却不是每次都有效的。原因有以下几点:
-
document.styleSheets
虽然按照style
和link
的顺序返回对应的StyleSheetList
,然而第一个如果是link
而不是style
,前面讲过此时无法获取对应的cssRules
,则document.styleSheets[0].cssRules
为null
,insertRule
方法不起作用。(此情况只针对非IE浏览器,IE浏览器正常,但是定义的早往往意味着被后面的样式覆盖,所以意义不大) - 同上,如果页面内没有内嵌样式的
style
标签,则insertRule
方法也无法发挥作用。 -
index
值不够大的话很有可能会早于css文件开始的定义位置,导致被覆盖。因此有个折衷办法就是给添加的样式增加!important
,虽然我个人比较反感这么做。
由此可见此方法的局限性,但是这种方法的优雅之处在于避免了直接写内嵌样式,而是通过css api来做更改。相比下面的方法来说,稍微好点。
但是这种方法好像局限性有点大啊?
HEAD
中添加style
标签强制覆盖初始属性
这个方法是利用内部css样式的高优先级来覆盖外部css,好处是简单易理解,实现简单。坏处就是吃相太难看,过于粗暴。
var style=document.createElement('style');
style.innerHTML=".test::before{color:green}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。document.head.appendChild(style);
看到这里可能有些人反应过来了,其实加style
标签这种方法可以是insertRule
实现方法的大前提——因为不是所有页面一开始都有内嵌的style
样式的。这种方法虽然不是很好,但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android使用webView长按保存下载网络图片
- Android实现万能自定义阴影控件实例代码
- 浅析android studio3.5中使用recycleview的包
- Android自定义View实现拼图小游戏
- 解决android设备断电重启后WIFI不能自动重连的BUG(收藏)
- Android gradle配置抽取合并的操作步骤
- Android BottomNavigationBar底部导航的使用方法
- Android超清晰6.0权限申请AndPermission
- Android仿微信录制语音功能
- Android仿微信语音对讲录音功能
- flutter 屏幕尺寸适配和字体大小适配的实现
- flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)
- android 9.0 launcher3 去掉抽屉式显示所有 app(代码详解)
- 图论-多源最短路径(Floyd算法)
- Android9.0 SystemUI 网络信号栏定制修改的流程解析