使用 JavaScript 检索伪元素的内容属性值

Question

我有以下 jQuery 代码：

$.each($(".coin"), function() {
    var content = "/*:before content*/";
    $("input", this).val(content);
});

我想根据其伪元素的content属性值 ( .coin:before)使用 jQuery 更改每个输入元素的值。

这里有一个例子：http : //jsfiddle.net/aledroner/s2mgd1mo/2/

Answer 1

根据 MDN，该.getComputedStyle()方法的第二个参数 是伪元素：

var style = window.getComputedStyle(element[, pseudoElt]);

伪Elt（可选）- 指定要匹配的伪元素的字符串。对于常规元素，必须省略（或为 null）。

因此，您可以使用以下命令来获取伪元素的content值：

window.getComputedStyle(this, ':before').content;

更新的示例

$('.coin').each(function() {
  var content = window.getComputedStyle(this, ':before').content;
  $("input", this).val(content);
});

如果你想根据字符获取实体代码，还可以使用以下方法：

var style = window.getComputedStyle(element[, pseudoElt]);

window.getComputedStyle(this, ':before').content;

$('.coin').each(function() {
  var content = window.getComputedStyle(this, ':before').content;
  $("input", this).val(content);
});