Bollate

HTML

[ANSWERED] html – How to use Javascript to change pseudo element contents?

By

Nov 20, 2022 , , ,

Solution 1 :

The simpliest way: 

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>

to target a specific element:

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>

what is the interest 200 lines of code for this question? is that minimal ?
please read: https://stackoverflow.com/help/minimal-reproducible-example

Solution 2 :

not sure if i understand your question and i cant comment yet. so here’s what i think you’re asking about grabbing the year id from the html markup

in the html markup, i see 

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

with js, you can do this

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

Problem :

I’m making a timeline website for practice and am trying to automatically update the pseudo elements to show the year on the timeline. I know I could do this targeting each nth-child, but there must be an easier way to do this using Javascript? I want to grab each year from each event using ID “yearGrab”. I’ve written a comment in the CSS to show which bit I want to get changed to save you reading it all.

Please let me know using pure Javascript. Thanks!

* {
	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>

Comments

Comment posted by ParcGrowing

My bad. New to coding & stack overflow. wanted to show the idea for the site to try and explain my question better.

Comment posted by Mister Jojo

@ParcGrowing Does my answer solve your problem, will you validate it?

Comment posted by ParcGrowing

Hi, unfortunately not. I haven’t made myself clear on what I was asking, sorry! I’m having trouble explaining what I require but that may be because what I want is not possible. I’ve decided to use an alternative approach. Thanks for taking the time to answer!

Comment posted by ParcGrowing

Hi there! I want to copy the year ‘2019’ within the yearGrab ID and make it appear in the 1st-child. But I want a way to do this throughout the content. so that the year shown in each timeline event is automatically pulled through to the relevant nth-child. Hope this makes sense.

Comment posted by user3366943

sorry, still not clear what you’re trying to do. can you pls add comment into your html markup what you like to extract and replace. thanks.

By

Related Post

HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022