Question

我希望使用Vanilla JavaScript将单独textContent元素的span继承到content样式的:after。

如下面HTML中所示，带有span span-class 的className是我要从中提取textContent的元素。包含className 示例的div是parent的{{1}} div 随机（其中包含 span-class ），以及我要应用className样式的p元素，其中包含继承的:after。

这些元素在整个网站中使用相同的content:" ";重复，因此需要一个数组，如下所示期望的结果。

HTML

className

CSS

<div class="sample">
 <div class="random">
  <span class="span-class">example</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>


<div class="sample">
 <div class="random">
  <span class="span-class">example2</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>

期望的结果：

注意：我知道.p-text:after{ content: "text I want to be dynamic"; }不起作用，但它最能说明我想要实现的目标

pText:after.content

另请注意：创建另一个var sample = Array.from(document.querySelectorAll(".sample")); sample.forEach(function(smpl) { var textContent = smpl.querySelector(".span-class").textContent; var pText = smpl.querySelector(".p-text"); if (textContent === "example") { pText:after.content = "example"; } else if (textContent === "example2") { pText:after.content = "example2"; } })元素并将其放在span textContent的末尾，尽管解决方案不是一个选项。

提前感谢任何解决方案！

Answer 1

您将获得此类p-text的所有元素，并从此处获取它的父级并使用querySelector来获取特定的子节点。然后获取它的内容并更新.p-text元素

的文本内容

document.querySelectorAll('.p-text').forEach(function(item) {
  let m = item.parentNode.querySelector('.span-class').textContent;
  let ItemContent = item.textContent + ' ' + m;
  item.innerHTML = ItemContent
})

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

Answer 2

您还可以在现代浏览器中使用css变量。

.p-text:after{
  content: var(--p-text-content, "");
  color: green;
}

像这样：

＆＃13;

var sample = Array.from(document.querySelectorAll(".sample"));

sample.forEach(function(smpl) {

	var textContent = smpl.querySelector(".span-class").textContent;
	var pText = smpl.querySelector(".p-text");

	pText.style.setProperty("--p-text-content", `'${textContent}'`);
})

＆＃13;

.p-text:after{
  content: var(--p-text-content, "");
  color: green;
}

＆＃13;

<div class="sample">
 <div class="random">
  <span class="span-class">example</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>

＆＃13;

Answer 3

HTML之前

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

<div class="sample">
  <div class="random">
    <span class="span-class">example2</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

<强> CSS

.p-text:after{
  content: attr(data-content);
}

data-content元素中的定位属性p允许使用el.dataset.content = "";对其进行操作，如下所示，使用JavaScript。

注意，如果某个元素尚未包含属性data-content，则下面的JavaScript会自动创建一个并相应地实现所需的更改。

<强>的JavaScript

var sample = Array.from(document.querySelectorAll(".sample"));

sample.forEach(function(smpl) {

    var textContent = smpl.querySelector(".span-class").textContent;
    var pText = smpl.querySelector(".p-text");
    if (textContent === "example") {
      pText.dataset.content = "example";
    } else if (textContent === "example2") {
      pText.dataset.content = "example2";
    }
})

JS / CSS后的结果

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text" data-content="example">
    some random text, some random text, some random text.
    ::after
  </p>
</div>

<div class="sample">
  <div class="random">
    <span class="span-class">example2</span>
  </div>
  <p class="p-text" data-content="example2">
    some random text, some random text, some random text.
    ::after
  </p>
</div>

更改元素：内容取决于使用Vanilla JavaScript

3 个答案: