How to add style to html element using javascript

May 4, 2024

I want to add style="font-weight: bold;" to the label tag of the html below:
<label for="Results_CheckZ" style="font-weight: bold;">Sample content</label>

<div id="Results_CheckZField" class="field-normal both checkZ">
    <div class="field-control">
        <div class="container-normal">
            <label for="Results_CheckZ">Sample content</label>
        </div>
    </div>
</div>

I tried the following but it didn’t work.
I don’t know how to get the label tag when it doesn’t have an id or class.
If anyone has any advice I’d appreciate it. Thanks!

const targetLabel = document.querySelector('#Results_CheckZField .field-control .container-normal');
targetLabel.setAttribute("style", "font-weight: bold;");

>Solution :

Select the label tag directly within the container-normal class and then apply the style to it.

const targetLabel = document.querySelector('#Results_CheckZField .field-control .container-normal label');
targetLabel.style.fontWeight = "bold";

const targetLabel = document.querySelector('#Results_CheckZField .field-control .container-normal label');
targetLabel.style.fontWeight = "bold";

<div id="Results_CheckZField" class="field-normal both checkZ">
    <div class="field-control">
        <div class="container-normal">
            <label for="Results_CheckZ">Sample content</label>
        </div>
    </div>
</div>