0

In my project, I have a div which I set to display: none; by default. When a user click an image, I use the onclick method to trigger my javascript function. The function applies display: inline; to both of my div's that are hidden by default.

Here is my code:

function hamburgerFunc(objs) {
  const objs = document.querySelector(".box.arrow-top")
  objs.style.display = 'inline-block';
}
.box.arrow-top:after {
  content: " ";
  position: absolute;
  right: 30px;
  top: -15px;
  border-top: none;
  display: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid white;
}
<img onclick="hamburgerFunc()" class="hamburger-btn" width="38px" src="{% static 'hamburgericon.png' %}" alt="Image of hamburger icon">
<div class="box arrow-top">
</div>

How do I access .box.arrow-top:after in the JS above. Ultimately, I want to apply display: none; to this.

Anyone know how to accomplish this? Thank you.

Mouser
  • 13,132
  • 3
  • 28
  • 54
NodeReact020
  • 486
  • 5
  • 23
  • 1
    You cannot access pseudo elements with Javascript because they are not in the DOM. – connexo Jan 10 '20 at 20:26
  • So, it's not an :after "condition" it's a pseudo selector. You set styles of them like: div::after (not one colon) Also, you can't declare a const that is a parameter of the function itself (objs). Further, pseudo selector's are generated by CSS, they are not a part of the DOM. See here: https://stackoverflow.com/questions/38872290/how-to-get-pseudo-element – Brad Evans Jan 10 '20 at 20:29

0 Answers0