编辑CSS内容：之前来自Javascript

Question

所以我有一个电话号码，我需要在我网站的DOM上动态更改。在我遇到这个问题之前没问题：

我能够更改元素的内部文本，但由于CSS上的样式具有“0810-222-1XXX”，因为内容无法覆盖此内容。

有办法吗？

Answer 1

仅应用CSS规则，该规则至少与CSS中的特定内容相同，或者更具体。您不能通过元素上的.style（因为该样式不应用于该元素，它应用于之前的伪元素，根本无法访问它）。

例如：

// Say we want to target the second one
var idAllocator = 0;
setTimeout(function() {
  var target = document.querySelectorAll("#header .number")[1];
  if (target) {
    if (!target.id) {
      target.id = "__unique__id__" + idAllocator++;
    }
    var style = document.createElement("style");
    style.type = "text/css";
    style.textContent = "#" + target.id + ".number::before { content: 'UPDATED'; }";
    document.querySelector("head").appendChild(style);
  }
}, 800);

#header .number::before {
    content: '0810-222-1XXX';
}

<div id="header">
  <div class="number">a</div>
  <div class="number">b</div>
  <div class="number">c</div>
  <div class="number">d</div>
</div>

您可以通过为style元素提供从元素ID中派生的ID来进一步实现这一点，以便您可以根据需要随后更新它：

var idAllocator = 0;
function updateBeforeContent(target, content) {
  if (!target.id) {
    target.id = "__unique__id__" + idAllocator++;
  }
  var styleId = "__style__for_" + target.id;
  var style = document.getElementById(styleId);
  if (!style) {
    style = document.createElement("style");
    style.type = "text/css";
    style.id = styleId;
    document.querySelector("head").appendChild(style);
  }
  style.textContent = "#" + target.id + ".number::before { content: '" + content + "'; }";
}
// Say we want to target the second one
var target = document.querySelectorAll("#header .number")[1];
if (target) {
  setTimeout(function() {
    updateBeforeContent(target, "UPDATE1");
  }, 800);
  setTimeout(function() {
    updateBeforeContent(target, "UPDATE2");
  }, 1600);
}

#header .number::before {
    content: '0810-222-1XXX';
}

<div id="header">
  <div class="number">a</div>
  <div class="number">b</div>
  <div class="number">c</div>
  <div class="number">d</div>
</div>

Answer 2

我使用的实际解决方案是创建一个新元素，应用所有需要的样式。使用以下方法隐藏不需要的元素：

element.style.display = "none"

最后将新元素作为旧父（基本上是兄弟）的孩子附加。

希望它有所帮助！