0

我想使用 Vanilla JavaScripttextContent将一个单独的span元素继承到content一个样式中。:after

正如下面在 HTML 中看到的那样，spanwith className span-class是我要从中提取的元素textContent。className 带有sampleparent的div是div带有className random的（其中包含span-class），以及p我要为其应用:after样式的元素，带有一个继承的content:" ";.

这些元素在整个网站中以相同的方式重复className，因此需要一个数组，如下面的Desired Outcome所示。

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: "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，.p-text虽然是一种解决方案，但不是一种选择。

提前感谢任何解决方案！

4

3 回答 3

0

你得到这个类的所有元素，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>

于 2018-05-17T05:04:50.390 回答
0

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

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

像这样 ：

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}'`);
})
.p-text:after{
  content: var(--p-text-content, "");
  color: green;
}
<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>

于 2018-05-17T05:50:33.283 回答
0

之前的 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>
于 2018-05-17T06:02:32.787 回答