Adding a style using CSS works, but using JS to apply same style doesn't

Question

When I add a certain class to an HTML element, the class works fine and applies the proper styling (i.e./ just adding .stn to the element in HTML). However when I repeat the same action using JS, the class applies but the styling doesn't show up (i.e/ checking using inspect element, the class is actually added to the element, but the styling doesn't show up).

I am using an IntersectionObserver to apply or remove the certain class, perhaps this is the issue and an incorrect use of the API?

Or is the nav ul li a {text-decoration: none;} css section overriding the application of the .stn class?

Thank you for looking!

let home = document.querySelector('.navHome');
let work = document.querySelector('.navWork');
let about = document.querySelector('.navAbout');

let homeTarget = document.querySelector('.home');
let homeOptions = {
  threshold: 0.4
}

let workTarget = document.querySelector('.work');
let workOptions = {
  threshold: 0.4
}

let aboutTarget = document.querySelector('.about');
let aboutOptions = {
  threshold: 0.5
}

let navHomeObserver = new IntersectionObserver(function(entries, navHomeObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.add('.stn');
      work.classList.remove('.stn');
      about.classList.remove('.stn');
    } else {
      return;
    };
  });
}, homeOptions);

navHomeObserver.observe(homeTarget);

let navWorkObserver = new IntersectionObserver(function(entries, navWorkObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.remove('.stn');
      work.classList.add('.stn');
      about.classList.remove('.stn');
    } else {
      return;
    };
  });
}, workOptions);

navWorkObserver.observe(workTarget);

let navAboutObserver = new IntersectionObserver(function(entries, navAboutObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.remove('.stn');
      work.classList.remove('.stn');
      about.classList.add('.stn');
    } else {
      return;
    };
  });
}, aboutOptions);

navAboutObserver.observe(aboutTarget);

nav {
  display: flex;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  align-items: center;
  justify-content: right;
  height: 100%;
  width: 10vw;
  z-index: 10000;
}

nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
}

nav ul li:nth-child(1) {
  margin-bottom: 2rem;
}

nav ul li:nth-child(2) {
  margin-bottom: 2rem;
}

nav ul li a {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  color: #FF5213;
}

.stn {
  text-decoration: line-through;
  /* THIS IS THE STYLE BEING APPLIED */
}

<nav>
  <ul>
    <li><a class="navHome" href="#">Home</a></li>
    <li><a class="navWork" href="#">Work</a></li>
    <li><a class="navAbout" href="#">About</a></li>
  </ul>
</nav>

Did you check the computed pane of the dev tools to see if there is another class that is superseding it? — Travis
– Travis, Commented Nov 18, 2021 at 20:00
Seems like the nav ul li a {text-decoration: none;} css code is overriding it. Is that a normal thing, is it possible to override that using JS? Also thank you for showing me the computed pane, never used it before! — kyija
– kyija, Commented Nov 18, 2021 at 20:22
You can use the !important rule, but that's kind of bad form. That rule is taking precedence because it's more specific. Here's a good article about css precedence... tutorials.jenkov.com/css/precedence.html — Travis
– Travis, Commented Nov 25, 2021 at 22:00

A Haworth · Accepted Answer · 2021-11-18 21:10:54Z

3

The setting of the classes in JS is incorrect.

For example:

home.classList.add('.stn');

should be:

home.classList.add('stn');

i.e. no dot before the class name.

So, it's just that the class isn't being added/removed from those nav items.

answered Nov 18, 2021 at 21:10

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a style using CSS works, but using JS to apply same style doesn't

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related