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方法的第二个参数,你能获取到伪元素样式里的属性!将这个技巧放入你的知识库里,随着浏览器的发展,伪元素将会变得越来越有用!
相关推荐
-
给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
-
JS控制伪元素的方法汇总
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬
-
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 API是: 复制代码 代码如下: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. 复制代码 代码如下: $(document).ready(function () { $(".contenttext").mouseup
-
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来帮助定位,获取到想要的元素 下面是部分代码 //使用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
随机推荐
- 利用js正则表达式校验正数、负数、和小数
- php 不使用js实现页面跳转
- Bootstrap+jfinal实现省市级联下拉菜单
- VBS教程:正则表达式简介 -非打印字符
- java中实体类转Json的2种方法
- CentOS 6.7系统下安装配置JDK的方法
- Oracle数据库安全策略
- c#中带头(声明)的xml(封装)生成
- Asp.net Core 1.1 升级后操作mysql出错的解决办法
- MySQL timestamp自动更新时间分享
- bootstrap table 服务器端分页例子分享
- 解决phpmyadmin中文乱码问题。。。
- sql server2016里面的json功能浅析
- Jquery获取和修改img的src值的方法
- javascript globalStorage类代码
- Javascript基础教程之关键字和保留字汇总
- ASP编程入门进阶(二):认识表单
- JavaScript函数、方法、对象代码
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 对比分析iOS延迟执行的4种方式