javascript控制伪元素的方法汇总

发表于 | 分类于 | 次

javascript控制伪元素的方法汇总

为什么不能用JavaScript直接获取伪元素？

比如::before和::after伪元素，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层加入。事实上，伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JavaScript无法直接操作它。而Jquery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。

伪元素有哪些？

伪元素有六个，分别为::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop。在各大网页中最常用的伪元素：::after, ::before。

获取伪元素的属性值

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

window.getComputedStyle(element, [,[pseudoElement]])

参数如下：

  • element:Object : 伪元素的所在DOM元素
  • pseudoElement:String :伪元素类型。可选值有：::after, ::before, ::first-line, ::selection, ::backdrop

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// CSS代码
#myId:before {
    content: "hello world!";
    display: block;
    width: 100px;
    height: 100px;
    background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

备注：

  1. getPropertyValue()和直接使用键值访问，都可以访问CSSStyleDeclaration Object。它们两者的区别有：
    • 对于float属性，如果使用键值访问，则不能直接使用getComputedStyle(ele, null).float，而应该使用cssFloat与styleFloat
    • 直接使用键值访问，则属性的键需要使用驼峰写法，如style.backgroundColor
    • 使用getPropertyValue()方法不必以驼峰书写形式，例如：style.getPropertyValue(‘border-top-color’)
  2. 伪元素默认是display: inline。如果没有定义display属性，即使在css中显示设置了width的属性值为固定的大小如“100px”,但是最后获取的width值仍为”quto“。这是因为行内元素不能自定义设置宽度。解决办法是给伪元素修改display属性为”block”,”inline-block”或其它。

更改伪元素的格式

  1. 更换class来实现伪元素属性的更改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // CSS代码
    .red::before { 
        content: "red"; 
        color: red; 
    }
    .green::before { 
        content: "green"; 
        color: green;
    }
    // HTML代码
    <div class="red">内容内容内容内容</div>
    // jQuery代码
    $(".red").removeClass('red').addClass('green');

  2. 使用CSSStyleSheet的insertRule来为伪元素修改样式：
    document.styleSheets[0].addRule(‘.red::before’, ‘color: green’); //支持IE

  3. 在标签中插入的内部样式：

    1
    2
    3
    4
    5
    var style = document.createElement("style"); 
    document.head.appendChild(style); 
    sheet = style.sheet; 
    sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
    sheet.insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

修改伪元素的content的属性值

  1. 使用CSSStyleSheet的insertRule来为伪元素修改样式

    1
    2
    3
    4
    var latestContent = "修改过的内容";
    var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); 
    document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); 
    document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);

  2. 使用DOM元素的data-*属性来更改content的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // CSS代码
    .red::before {
    content: attr(data-attr);
    color: red;
    }
    // HTML代码
    <div class="red" data-attr="red">内容内容内容内容</div>
    // JacaScript代码
    $('.red').attr('data-attr', 'green');

::before和::after伪元素的常用用法总结

  1. 添加字符串：
    使用引号包括一段字符串，将会向元素内容中添加字符串。
    a:after { content: “after content”; }

  2. 使用attr()方法，调用当前元素的属性的值

    1
    2
    a:after { content: attr(href); }
    a:after { content: attr(data-attr); }

  3. 使用url方法，引用多媒体文件：
    a::before { content: url(logo.png); }

  4. 清除浮动

    1
    2
    .clear-fix { *overflow: hidden; *zoom: 1; }
    .clear-fix:after { display: table; content: ""; width: 0; clear: both; }