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

简介: 获取伪元素的属性值获取伪元素的属性值可以使用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');

 

目录
打赏
0
0
0
0
3
分享
相关文章
类选择器和伪类选择器有何不同
类选择器和伪类选择器有何不同【2月更文挑战第26天】
86 10
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
174 0
伪类,伪元素有什么,区别是什么
伪类,伪元素有什么,区别是什么
168 0
th固定宽度属性
th固定宽度属性
49 0
伪类选择器与伪元素选择器的区别
【10月更文挑战第23天】通过以上对伪类选择器和伪元素选择器的详细比较和分析,我们可以更清晰地理解它们之间的差异和各自的特点。在实际的网页设计和开发中,正确地选择和使用伪类选择器与伪元素选择器,能够为我们的页面带来更出色的视觉效果和更好的用户体验。同时,要不断关注浏览器的发展和更新,以确保我们的代码在各种环境下都能正常运行。
91 8
|
6月前
|
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
154 3
前端基础(五)_CSS文本文字属性、背景颜色属性
哪些标签存在伪元素,伪类和伪元素的区别
哪些标签存在伪元素,伪类和伪元素的区别
行内样式表(style属性)
行内样式表(style属性)。
52 4
伪元素和伪类的区别和作用?
伪元素和伪类的区别和作用?
106 0