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

问题描述 投票：0回答：1

我正在制作时间轴网站进行练习，并尝试自动更新伪元素以在时间轴上显示年份。我知道我可以针对每个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个回答
1
投票

最简单的方法：

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

myDiv.dataset.info = 'other info'
#my-div::after { content : attr(data-info); color:red; } 
<div id="my-div" data-info="info" > blah blah blah </div>

此问题感兴趣的200行代码是什么？那是最小的吗？请阅读：https://stackoverflow.com/help/minimal-reproducible-example

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.