JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，还可以用它完成很多简单的任务，而不需要多余的HTML元素。以前，伪元素的CSS属性是无法用JavaScript获取的，但现在，有了一个新的JavaScript方法可以访问它们！ 假设你的CSS代码是这样的：

代码如下:

.element:before {
 content: 'NEW';
 color: rgb(255, 0, 0);
}

为了获取.element:before里的样式属性，你可以使用下面的JavaScript代码：

代码如下:

var color = window.getComputedStyle(
 document.querySelector('.element'), ':before'
).getPropertyValue('color')

将伪元素作为window.getComputedStyle方法的第二个参数，你能获取到伪元素样式里的属性！将这个技巧放入你的知识库里，随着浏览器的发展，伪元素将会变得越来越有用！

赞 (0)

相关推荐

  • JS控制伪元素的方法汇总

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

  • 给before和after伪元素设置js效果的方法

    给before和after伪元素设置js效果的方法

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元素". 前面的话 无法直接给before和after伪元素设置js效果 例子说明 现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类) <!DOCTYPE html> <html l

  • Javascript获取CSS伪元素属性的实现代码

    CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签.有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到: 看看下面的CSS代码: .element:before { content: 'NEW'; color: rgb(255, 0, 0); }.element:before { content: 'NEW'; color: rgb(255, 0, 0); } 为了获取到.element

  • Vue获取DOM元素并修改属性的方法

    Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式 使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(

  • JavaScript获取网页表单action属性的方法

    本文实例讲述了JavaScript获取网页表单action属性的方法.分享给大家供大家参考.具体如下: JavaScript获取网页表单的action属性,即要提交到的url地址,有时候需要提交到当前页面,则可能会设置action为空 <!DOCTYPE html> <html> <body> <form id="frm1" action="jb51.php"> First name: <input type=&

  • JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    CSS伪元素(pseudo-elements)非常的有用--你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素.以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的: 复制代码 代码如下: .element:before {  content: 'NEW';  color: rgb(255, 0, 0); } 为了获取.element:before里的

  • JavaScript中为元素加上name属性的方法

    今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行) 后来我查看了 MSDN, 得到信息如下: 复制代码 代码如下: Internet Explorer 8 and later can set the NAME attribute a

  • JavaScript获取页面上被选中文字的方法技巧

    JavaScript获取页面上被选中文字的方法技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: 复制代码 代码如下: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. 复制代码 代码如下: $(document).ready(function () {    $(".contenttext").mouseup

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

  • Javascript获取页面元素的绝对位置实现

    目录 一.概念 二.获取方法 三.代码 四.问题 一.概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二.获取方法 1.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离. 2.每个元素都有offsetParent属性.offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • 使用js获取伪元素的content实例

    使用js获取伪元素的content实例

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content String script = "return window.getComputedStyle(document.querySelector('.myTips'),':after').getPropertyValue('content')"; JavascriptExecutor js = (J

  • JavaScript获取指定元素位置的方法

    本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

随机推荐