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动态更改伪元素属性值的话,该怎么处理呢? 思路有以下几个:

  1. js更改data-*属性值来更改伪元素的content
  2. 创建多个class,通过切换class来达到改变样式的目的
  3. 利用CSSStyleSheet的insertRule方法来添加样式
  4. 利用内部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样式表的对象方法(不包括行内样式),每个linkstyle标签都代表一个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值定义的位置,之前其余的规则依次顺延。

addruleinsertRule方法本质上没区别,只是后者不被IE浏览器识别,所以前者作为浏览器兼容方法存在。(下文为节省篇幅,以insertRule方法指代此两种方法。)

上面的代码看似简单一行,然而却不是每次都有效的。原因有以下几点:

  1. document.styleSheets虽然按照stylelink的顺序返回对应的StyleSheetList,然而第一个如果是link而不是style,前面讲过此时无法获取对应的cssRules,则document.styleSheets[0].cssRulesnullinsertRule方法不起作用。(此情况只针对非IE浏览器,IE浏览器正常,但是定义的早往往意味着被后面的样式覆盖,所以意义不大)
  2. 同上,如果页面内没有内嵌样式的style标签,则insertRule方法也无法发挥作用。
  3. 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样式的。这种方法虽然不是很好,但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2016-01-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习与计算机视觉

PEP 8 —Python代码风格指南(一)

原文:PEP 8 – Style Guide for Python Code PEP:8 题目:Python代码风格指南 作者:Guido van Ro...

24290
来自专栏阿凯的Excel

自定义单元格格式(判断版)

前两期分别介绍了自定义单元格格式的数字版、文本版。本期将分享最后一个内容,自定义单元格格式的条件判断。同时也会分享一些比较偏,比较少用的应用! 一、基础知识分...

29540
来自专栏Micro_awake web

HTML&CSS书写规范

第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

248100
来自专栏HTML5学堂

2016.05 第三周 群问题分享

HTML+CSS 一个div里面有个img标签,div的高度由img撑开;img的兄弟级有个div要使内层div的高度等于外层div的高度,除了用JS实现,还能...

372130
来自专栏阿凯的Excel

小小查找键、大大大乐趣

你是不是在高速路口堵车的时候看到本文章呢? 不要问我在干嘛! 今天和大家愉快的分享的是查找键!! 神马?查找键还需要分享? 查找键其实分两类,一种是Ctr...

22540
来自专栏我杨某人的青春满是悔恨

谈谈Swift的extension

3.times { puts 'hello world' } 这是一条Ruby语句,它会打印“hello world”三次,意图清晰,语法简洁。

9720
来自专栏Google Dart

AngularDart4.0 指南- 模板语法一 顶

学习如何编写显示数据并在数据绑定的帮助下使用用户事件的模板。 Angular应用程序管理用户看到和可以做的事情,通过组件类实例(组件)和面向用户的模板的交互来...

15010
来自专栏IMWeb前端团队

React高阶组件(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://daveceddia.com/extra...

20160
来自专栏分布式系统和大数据处理

Go语言Tips

转型到Go以后,因为语言的不熟悉,以往很常见的一些操作有时候也需要去Google一下。这里将一些结果记录下来,方便日后查阅。

15120
来自专栏HTML5学堂

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到...

53080

扫码关注云+社区

领取腾讯云代金券