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

【问题标题】：Retrieve a pseudo element's content property value using JavaScript使用 JavaScript 检索伪元素的内容属性值
【发布时间】：2015-12-06 20:20:34
【问题描述】：

我有以下 jQuery 代码：

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

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

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

【问题讨论】：

那么问题是什么？
我该怎么做？缺少代码/*：在内容之前*/
我不明白，你的代码有效，你想在 .coin 输入中有什么？
我的代码不起作用。请注意，前两个输入没有值属性，但
Final result
之后的输入是。
最终结果
只是问题的解决方案，但Jquery代码不会作用于这些输入。看看这个：jsfiddle.net/aledroner/s2mgd1mo/3。我只想通过每个伪元素的属性“内容”的值来更改 /*before content*/
属性content在哪里？我看不到它。

标签： javascript jquery html css pseudo-element

【解决方案1】：

According to MDN,.getComputedStyle() method的第二个参数是伪元素：

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

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

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

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

Updated Example

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

如果要根据字符获取实体代码，也可以使用如下：

function getEntityFromCharacter(character) {
  var hexCode = character.replace(/['"]/g, '').charCodeAt(0).toString(16).toUpperCase();
  while (hexCode.length < 4) {
    hexCode = '0' + hexCode;
  }

  return '\\' + hexCode + ';';
}
$('.coin').each(function() {
  var content = window.getComputedStyle(this, ':before').content;
  $('input', this).val(getEntityFromCharacter(content));
});

.dollar:before {
  content: '\0024'
}
.yen:before {
  content: '\00A5'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coin dollar">
  <input type="text" />
</div>
<div class="coin yen">
  <input type="text" />
</div>

【讨论】：

但我需要结果是“\0024”而不是“$”
@aledroner 你需要转换它。请参阅此更新示例：jsfiddle.net/vzxyv9ua
你是个天才。谢谢！

Final result

最终结果