Remove property function JS encountering the property correct application issue

<main>
  <article class="recur">
    <strong>September 24, 2017</strong>
    <h2>Placeholder title of the blog</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repellat in voluptatibus, eligendi necessitatibus animi. Non consequuntur quas atque, eveniet dolorem laborum, veniam voluptatum eaque eos ratione nisi distinctio! Ipsam.</p>
  </article>
  <article class="recur">
    <strong>September 24, 2017</strong>
    <h2>Placeholder title of the blog</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repellat in voluptatibus, eligendi necessitatibus animi. Non consequuntur quas atque, eveniet dolorem laborum, veniam voluptatum eaque eos ratione nisi distinctio! Ipsam.</p>
  </article>
  <article class="recur">
    <strong>September 24, 2017</strong>
    <h2>Placeholder title of the blog</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repellat in voluptatibus, eligendi necessitatibus animi. Non consequuntur quas atque, eveniet dolorem laborum, veniam voluptatum eaque eos ratione nisi distinctio! Ipsam.</p>
  </article>
  <article class="footer pagination">
    <div>← Back</div>
    <div>Next →</div>
  </article>
</main>

For the above-said element, there is a CSS set:

article.recur {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap:7px;
  background-color: var(--yalert);
}

I was trying to remove the background through JS:

function deleteBackgroudColor() {
  const backGround = document.getElementsByTagName('article.recur')
  console.log(backGround)
  for (let i = 0; index < backGround.length; i++) {
    backGround[i].style.removeProperty('background-color')   
    console.log(backGround[i]) 
  }  
}
setTimeout(deleteBackgroudColor, 2000)

But the anticipated result is not delivered. I am faltering somewhere: either a syntax issue or concept or any other bug issue.

1 Like

The style property addresses only rules applied directly to the element (e.g. with the style attribute). It does not address rules from anywhere else in the cascade.

The following will do what you require:

function deleteBackgroudColor() {
  const recur = document.querySelectorAll('article.recur');

  recur.forEach((el) => {
    el.setAttribute('style', 'background-color: white');
  });
}
setTimeout(deleteBackgroudColor, 500)

But it’s not an elegant solution.

Ref.: https://stackoverflow.com/questions/63858911/remove-class-style-property-using-javascript

2 Likes

Sir, Nodelist is not an array?

Correct, but it still has a forEach method.

3 Likes

Why don’t you use js to add a class and then let css change the background color? That keeps control of the appearance in the css file where it belongs. :slight_smile:

2 Likes

PaulOB’s keep it simple approach, seems to make sense to me.

Just for your info though.

You can set a value for the variable ‘yalert’

function deleteBackgroudColor() {
  const recur = document.querySelectorAll('article.recur');

  recur.forEach((el) => {
    el.style.setProperty('--yalert', 'none')
  });
}

An alternative is CSSStyleSheet.

Each stylesheet comes with an href and title property, which could be useful for targeting a specific stylesheet.

In this example the required styleSheet is the first item.

const styleSheet = document.styleSheets[0]
const rules = Array.from(styleSheet.cssRules)
const recur = rules.find((rule) => rule.selectorText === 'article.recur')

if (recur !== undefined) {
  recur.style.removeProperty('background-color')
}

Codepen here

3 Likes

Ah!!! That’s what I was missing.

I was scratching my head as to why this worked:

el.style.setProperty('background-color', 'pink');

But this didn’t:

el.style.setProperty('background-color', 'none');

Nice one.

2 Likes

‘None’ is not a valid css value for background-color. :). You need transparent.

The value none will work for the shorthand background property but that refers to the background-image and then all other shorthand values are reset to default.

3 Likes

@PaulOB Sir, doesn’t that class introduction and its removal method has a small flaw?
I added templclass with its CSS:

.tempclass {
  background-color: var(--yalert);
  transition: background-color 0.3s 0.05s;
}

But when this is fired: setTimeout(deleteBackgroudColor, 3000) the whole said class is deleted( classList.remove('tempclass')) it also deletes the effect of the transition property.

No the transition property should be on the original rule not the new class and then it will work.

1 Like

Yes, It does. Thanks!

Ahh!! (again) and also Doh!

3 Likes

There is one more point, not an issue, after setting up the transition CSS to the main CSS class(article.recur):

Now even when the page is downloaded/refreshed, obliviously, it also takes time for the background color to appear because of the transition property set: transition: background-color 5s 0.05s;

What If I want to fix it?
I could not visualize the CSS method, but the JS method yes. Can this also dealt with CSS?

I don’t follow? When you load the page there is no change to the background color so there is no transition. It’s only when you change the background color that a transition occurs.( I’m not sure why you have added a delay anyway as you already have a delay in your timeout js.)

I’m assuming that you change the background color in response to some action otherwise you may as well just change the css to start with.

Do you have an example of this happening?

1 Like

@PaulOB

Sir, I have reproduced the HTML here: Codepen

The yellow background that appears behind was initially also loading with delay as per JS code and transition, but I don’t know now if it doesn’t behave what it was 2 days before.

Sorry, I don’t know what I’m looking for:)

I don’t see any yellow on load.

A css transition does not run unless a property changes. e.g. This makes no difference.

.test{
background:red;
transition:all 500000s ease;
}

That transition has no effect until you change something like this:

.test:hover{background:green}

Now you will have to wait years for it to turn green :slight_smile:

2 Likes

… I feel like this entire thread is an overcomplication.

What exactly are you trying to do? From start to finish.

1 Like

@PaulOB : What I THINK he’s trying to get to is:

Step 1: Throw all of the javascript in the trash.
Step 2: CSS define keyframes for a transition from background-color: var(--yalert) to background-color: transparent;
Step 3: CSS Animation all article.recur forwards using defined keyframes with some animation-duration set. Maybe animation-delay 1s.

2 Likes

Ah ok :slight_smile:

I can see the yellow now as well but only if I’m quick as my connection is so slow it was gone before the page loaded :slight_smile:

A keyframe can be set on the tempclass and will run when the page loads.

article.recur {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap:7px;
 /* transition: background-color 4s 1s;*/
  background-color: var(--yalert);
}
.tempclass {
  background-color: var(--yalert); 
  animation:fadeIn 4s 1s forwards;
}
@keyframes fadeIn{
  from{background-color: var(--yalert);}
  to{background:transparent;}
}

No js is necessary.

If you are adding a single section dynamically and want it to fade in then just ensure you apply the tempclass to it by default.

2 Likes

No. The thread is not an over-complication. I was doing something and tried to deal something with JS while practicing something. Was not looking for a simple solution, but JS based so that I could practice those things.

I got your point, though, CSS frames I know can do this, but I was doing something else and the same was the initial topic in the first few discussions on this post.

1 Like