获取伪元素的属性和改变伪元素的属性

简介: 获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

获取伪元素的属性值

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

语法:window.getComputedStyle(element, [pseudoElement])

  • 参数如下:
  • element(Object):伪元素的所在的DOM元素;
  • pseudoElement(String):伪元素类型。可选值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;

js语法实例:

var mydiv=document.querySelector('#mydiv');

var fontSize=window.getComputedStyle(mydiv,'::before').getPropertyValue('font-size');//获取before伪元素的字号大小

 

更改伪元素的样式

通过更换class来实现伪元素属性值的更改:

举个栗子:

// CSS代码

.red::before {

    content: "red";

    color: red;

}

.green::before {

    content: "green";

    color: green;

}

// HTML代码

<div class="red">内容内容内容内容</div>

// jQuery代码

$(".red").removeClass('red').addClass('green');

 

相关文章
|
7月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
119 0
th固定宽度属性
th固定宽度属性
42 0
|
前端开发
css中的浮动属性
css中的浮动属性
|
10天前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
|
3月前
|
JavaScript 容器
哪些标签存在伪元素,伪类和伪元素的区别
哪些标签存在伪元素,伪类和伪元素的区别
|
5月前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
191 0
|
前端开发
伪元素和伪类的区别和作用?
伪元素和伪类的区别和作用?
77 0
|
前端开发 JavaScript
CSS: hover选择器控制子元素的出现和隐藏
CSS: hover选择器控制子元素的出现和隐藏
96 0
|
前端开发
css选择器+属性+盒子模型
css选择器+属性+盒子模型
|
前端开发 容器
CSS之常用属性、元素的显示模式、盒模型(下)
CSS之常用属性、元素的显示模式、盒模型(下)
121 0