How to change the style of an element by the style of another element in vanilla JavaScript?

[bendqh1]

I want that if element A fontWeight is bold then element B fontWeight is normal.

I have tried this which failed in console:

const elementA = document.querySelector('#a');
const elementB = document.querySelector('#b');

if ( elementA.style.fontWeight == "bold" ) {
    elementB.style.fontWeight = "normal";
};

undefined

Adding !important after normal didn’t change the result.

How to change the style of an element by the style of another element in vanilla JavaScript?
Is it even possible to change the style of an element by the style of another element in JavaScript?

[tracknut]

@bendqh1

fontweight = "normal"

Oh so close… try fontWeight (with uppercase W)

[bendqh1]

Thanks, I have fixed that typo in the question.
I am surprised VSCODE didn’t throw an exception about it (an accessibility issue for a non native English speaker like me).

Anyway, sadly I have double checked the fixed code and it still doesn’t work.

undefined

[tracknut]

Show your html then - the JS you’ve wrote is fine.

[m_hutley]

To be precise, the Javascript is accurate if a’s font weight is actually ‘bold’, and not… 700, for example.

[thetaimourahmed]

You’re on the right track wanting to tweak the style of one element based on another in JavaScript. But here’s the thing – the approach you’re using has a tiny hiccup. Let me guide you through it with some easy-peasy steps.

1. Grabbing the Elements: You’re doing great here! You’ve correctly used document.querySelector to grab elements A and B. No problemo there!

const elementA = document.querySelector('#a');
const elementB = document.querySelector('#b');

1. Checking the Style: This is where it gets a tad tricky. When you use elementA.style.fontWeight, you’re only checking the inline style of the element. This means if the boldness of elementA is set in a CSS file or in a <style> tag, your script won’t be able to see it.To catch that boldness no matter where it’s hiding, use window.getComputedStyle(elementA).fontWeight. This little line of code is like a detective – it digs through all the styles to find what you’re looking for.
2. Applying the Style: You’re almost there! If elementA is bold, you want elementB to go normal. Your if-statement logic is spot-on, but remember, window.getComputedStyle(elementA).fontWeight doesn’t return just “bold” or “normal”. It usually returns a number – like 700 for bold and 400 for normal.So, tweak your if-statement to check for these numbers. And about !important, you don’t really need it here. That’s more of a CSS thing.

Putting it all together, your script will look something like this:

const elementA = document.querySelector('#a');
const elementB = document.querySelector('#b');

// Get the computed style of elementA
const styleA = window.getComputedStyle(elementA).fontWeight;

// Check if elementA's fontWeight is 'bold' (usually 700)
if (styleA === '700') {
    elementB.style.fontWeight = 'normal'; // Set elementB to normal
}

And voilà! You’ve just made elementB change its style based on elementA ! Keep in mind, though, this script needs to run after the page has loaded, so the styles are all set and ready to be checked.

[bendqh1]

I have an SEO problem in doing that – the /example webpage looks awful and may cause search engines to lower the quality score of my website.
I have already added Disallow: /example to robots.txt and SitePoint has a rel="nofollow" policy but that may not be enough and I need some authentication for that webpage or another solution.

Anyway, the JavaScript solution below by @thetaimourahmed worked.