使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下
// 获取 .element:before 的 color 值
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color'); // 获取 .element:before 的 content 值
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
使用JavaScript获取CSS伪元素属性的更多相关文章
- JavaScript 修改 CSS 伪类属性
背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...
- 重温JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- jquery选择伪元素属性的方法
CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...
- CSS 伪元素&伪类
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行添加特殊 ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
随机推荐
- 检测SqlServer服务器性能
通过性能监视器监视 Avg. Disk Queue Length 小于2 Avg. Disk sec/Read , Avg. Disk sec/Write 小于10ms 可以用数据收集器定时收集 ...
- 基于JDBC的跨平台数据库管理工具DbVisualizer安装步骤(图文详解)(博主推荐)
首先,关于跨平台数据库管理工具DbVisualizer是什么?这个不多说,大家自行去看. 这个工具可以自定义连接其他没有驱动的数据库. 公司的项目牵扯到的数据库有mysql,sqlserver,o ...
- Entity Framework使用汇总
EF的发展历程 还是先来说一下EF从诞生到现在这几年的发展历程吧.在EF最初的版本中,作为一个ORM组件其通过EDM文件(里面是一些xml)来配置数据库与实体类之间的映射,实现数据进出数据库的控制.最 ...
- 优化笔记: jxrsfxrxx_D_20140916.gz
表的重复扫描. ----------------------------------想进一步研究,继续往下看------------------------------ 1. 所有相似 ...
- JS逻辑题 技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序
考查的技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...
- qcow2磁盘加密及libvirt访问
1.创建qcow2加密磁盘[root@Coc-5 test_encrypt]# qemu-img convert -f qcow2 -O qcow2 -o encryption template_ ...
- Centos内核参数
内核参数 abi.vsyscall32 = 1 在2.6.25版本以后的x86-64内核中,默认启用了VDSO32. 虚拟动态共享对象 http://man7.org/linux/man-pages ...
- xe8 单元别名
xe8 单元别名 Unit scope F2613 Unit 'Graphics' not found. Project>Option>Unit scope names> vcl.I ...
- BurpSuite系列(十二)----User options模块(用户选择)
一.简介 User options模块主要用来配置一些常用的选项. 二.模块说明 User options主要由4个模块组成: 1.Connections 连接 2.SSL 3.Display 4 ...
- 7. H.264的句法和语义
1.句法 在编码器输出的码流中,数据的基本单位是句法元素,每个句法元素由若干比特组成,它表示某个特定的物理意义,例如:宏块类型.量化参数等. 句法表征句法元素的组织结构,语义阐述句法元素的具体含义. ...