如何使用 Javascript 更改伪元素内容？答案

【问题标题】：How to use Javascript to change pseudo element contents?如何使用 Javascript 更改伪元素内容？
【发布时间】：2020-08-02 22:49:06
【问题描述】：

我正在制作一个用于练习的时间线网站，并尝试自动更新伪元素以在时间线上显示年份。我知道我可以针对每个 nth-child 执行此操作，但必须有更简单的方法来使用 Javascript 执行此操作吗？我想使用 ID“yearGrab”从每个事件中获取每一年。我已经在 CSS 中写了一条评论，以显示我想要更改哪一点以节省您阅读所有内容的时间。

请让我知道使用纯 Javascript。谢谢！

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Vardana';
}

body {
	background: linear-gradient(to right, rgba(10,20,38,.96), rgba(26,49,75,.94));
	height: 100%;
}
.container {
	height: 650px;
	overflow-y: scroll;
	font-size: 13px;
	cursor: grabbing;
}

#timelineList, li{
	width: max-content;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
	display: table-cell;
	max-width: none;
}

.timeline ul#timelineList:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 4px;
	background: white;
	margin-top: 306px;
}
/*NEXT TWO BITS ARE THE TARGET TO CHANGE WITH JAVASCRIPT*/
.timeline .EventOddDescription:after {
  content: '2019';
	color: white;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	font-size: 17px;
  position: absolute;
  left: 56px;
  bottom: -43.5px;
	border: 1.8px solid white;
	background: linear-gradient(to right, rgba(10,20,38,.9), rgba(26,49,75,.7));
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  border-radius: 10%;
}
.timeline .EventEvenDescription:after {
  content: '';
	color: white;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	font-size: 17px;
  position: absolute;
  left: 56px;
  top: 49px;
	border: 1.8px solid white;
	background: linear-gradient(to right, rgba(10,20,38,.9), rgba(26,49,75,.7));
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  border-radius: 10%;
}

.timeline .EventOddDescription:before {
  content: '';
  position: absolute;
  bottom: -14px;
	left: 42px;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 14px solid white;
}
.timeline .EventEvenDescription:before {
	content: '';
  position: absolute;
  top: 80px;
	left: 42px;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 14px solid white;
}

.timeline ul li div {
	background: white;
	margin-top: 94px;
	margin-left: 30px;
	padding: 10px;
	border-radius: 10px;
	color: black;
	width: 500px;
	height: 200px;
	overflow: hidden;
	box-shadow: 3px 3px 18px black;
}
.Category1 {
	display: block;
	background: linear-gradient(to right, rgba(101,78,163, 1)30%, rgba(101,78,163, .6));
	padding: 4px;
	margin: -10px;
	padding-left: 10px;
	color: white;
	font-weight: 200;
}
.Category2 {
	display: block;
	background: linear-gradient(to right, rgba(255, 65, 108, 1) 30%, rgba(255, 65, 108, .6));
	padding: 4px;
	margin: -10px;
	padding-left: 10px;
	color: white;
	font-weight: 200;
}
.Category3 {
	display: block;
	background: linear-gradient(to right, rgba(253, 200, 48, 1)30%, rgba(253, 200, 48, .4));
	padding: 4px;
	margin: -10px;
	padding-left: 10px;
	color: white;
	font-weight: 200;
}

.timeline ul li:nth-child(odd) {
  top: -18px;
}
.timeline div:nth-child(odd) {
	margin-right: -265px;
}
.timeline ul li:nth-child(even) {
  top: 247px;
	left: -80px;
}

.EventOddDescription {
	display: flex;
	flex-direction: row;
}

.EventEvenDescription {
	display: flex;
	flex-direction: row;
}

<!DOCTYPE HTML>
<html lang=“en”>
  <head>
	<title>Dads Website</title>
	<link rel="stylesheet" href="stylesheet.css">
  <script src="JavaScript.js" defer></script>
  </head>

  <body>
    <header>
          <h1>Pluto Timeline</h1>
    </header>

<section class="container">
  <div class="timeline">
    <ul id="timelineList">
      <li class="Event1">
        <div class="EventOddDescription">
          <p><span class="Category1">Category 1</span><br>
          <strong>Pluto Born</strong><br>
          <strong class="Year">03rd April <span id="yearGrab">2019</span></strong><br>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.<a href="Event2More">Read More</a></p>
        </div>
      </li>
      <li class="Event2">
        <div class="EventEvenDescription">
          <p><span class="Category2">Category 2</span><br>
          <strong>Pluto's First Nap</strong><br>
          <strong class="Year">30th May 2020</strong><br>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          <a href="Event2More">Read More</a></p>
        </div>
      </li>
        <li class="Event3">
          <div class="EventOddDescription">
            <p><span class="Category3">Category 3</span><br>
            <strong>Pluto's Second Nap</strong><br>
            <strong class="Year">03rd April 2020</strong><br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="Event3More">Read More</a></p>
          </div>
        </li>
      </ul>
  </div>
</section>



 </body>

 <footer class="footer">
 </footer>
</html>

【问题讨论】：

标签： javascript html css pseudo-element

【解决方案1】：

最简单的方法：

const myDiv = document.getElementById('my-div')

myDiv.dataset.info = 'other info'

#my-div::after { content : attr(data-info); color:red; }

&lt;div id="my-div" data-info="info" &gt; blah blah blah &lt;/div&gt;

针对特定元素：

const myDivFirst_P = document.querySelector('#my-div p:first-child')

myDivFirst_P.dataset.info = ' info'

#my-div p::after { content : attr(data-info); color:red; }

 <div id="my-div">
  <p> the first<p>
  <p> the second<p>
  <p> the third<p>
</div>

这道题的 200 行代码有什么用？这是最小的吗？
请阅读：https://stackoverflow.com/help/minimal-reproducible-example

【讨论】：

我的错。编码和堆栈溢出的新手。想展示网站的想法，以尝试更好地解释我的问题。
@ParcGrowing 我的回答能解决你的问题吗，你会验证吗？
嗨，很遗憾没有。我没有说清楚我在问什么，对不起！我无法解释我需要什么，但这可能是因为我想要的东西是不可能的。我决定使用另一种方法。感谢您花时间回答！

【解决方案2】：

不确定我是否理解您的问题，我还不能发表评论。所以这就是我认为您要从 html 标记中获取年份 id 的问题

在 html 标记中，我看到了

<span id="yearGrab">2019</span>

用js，你可以做到这一点

let yearGrab = getElementById('yearGrab')
yearGrab.innerText = 'whatever string you want'

【讨论】：

您好！我想在 yearGrab ID 中复制“2019”年并使其出现在第一个孩子中。但我想要一种方法在整个内容中做到这一点。这样每个时间线事件中显示的年份就会自动拉到相关的第 n 个孩子。希望这是有道理的。
抱歉，仍然不清楚您要做什么。您可以在您的 html 标记中添加您想要提取和替换的注释吗？谢谢。