Как использовать Javascript для изменения содержимого псевдоэлемента? - PullRequest
Новая
       26

Как использовать Javascript для изменения содержимого псевдоэлемента?

0 голосов
/ 20 апреля 2020

Я делаю сайт временной шкалы для практики и пытаюсь автоматически обновить псевдоэлементы, чтобы показать год на временной шкале. Я знаю, что могу сделать это для каждого nth-ребенка, но должен быть более простой способ сделать это, используя Javascript? Я хочу получать каждый год с каждого события, используя идентификатор "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>

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Самый простой способ: 

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>

для указания определенного элемента c: 

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 строк кода для этого вопроса? это минимально?
пожалуйста, прочитайте: { ссылка }

0 голосов
/ 20 апреля 2020

не уверен, что понимаю ваш вопрос и не могу комментировать. вот что я думаю, что вы спрашиваете о получении идентификатора года из html разметки

в разметке html, я вижу 

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

с js, вы может сделать это 

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