/    Sign up×
Community /Pin to ProfileBookmark

Add style css with javascript

(style=”font-weight:bold;color:#F23F3F;)
how do i add this (css style) using javascript so that it looks like the example below:

<div class=”main-menu”>
<ul>
<li class=”menu-item-has-children”>
<a href=”https://site.com” style=”font-weight:bold;color:#F23F3F;”>site</a> ====exemplo=====
</li>
</ul>
</div>

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 18.2020 — Unfortunately the forum software made a smiley out of `);` - I added code tags in order to fix this.
Copy linkTweet thisAlerts:
@GRman45authorAug 18.2020 — @Sempervivum#1622246

can you tell me how to add style css as in this example that I spent?
Copy linkTweet thisAlerts:
@SempervivumAug 18.2020 — Add an appropriate class to your element(s) like this:

`&lt;a href="https://site.com" class="highlight"&gt;site&lt;/a&gt;`

and style it/them:
<i>
</i>document.querySelectorAll('.highlight').forEach(item =&gt; {
item.style.fontWeight = ' bold';
itemstyle.color = '#F23F3F';
});
Copy linkTweet thisAlerts:
@GRman45authorAug 18.2020 — @Sempervivum#1622257

in this case the menu is dynamic, and I wanted to add class = "highlight" only on the third and fourth items on the list.

If you do as you are saying, class = "highlight" will add to all items.
Copy linkTweet thisAlerts:
@SempervivumAug 18.2020 — Use `nth-child` in order to address these item:
document.querySelector('.main-menu li:nth-child(3)').classList.add('highlight');
document.querySelector('.main-menu li:nth-child(4)').classList.add('highlight');

Then you can style these items by CSS:
&lt;style&gt;
.highlight {
font-weight: bold;
color: #F23F3F;
}
&lt;/style&gt;
Copy linkTweet thisAlerts:
@GRman45authorAug 18.2020 — @Sempervivum#1622263

thanks bro, wonderful
Copy linkTweet thisAlerts:
@VITSUSAAug 19.2020 — @Sempervivum#1622263 This is really perfect solution :) and it's also working well.
Copy linkTweet thisAlerts:
@siddhi_patelSep 14.2020 — Use this nth-child in order to address Tegs:

``<i>
</i>document.querySelector('.main-menu li:nth-child(3)').classList.add('highlight');
document.querySelector('.main-menu li:nth-child(4)').classList.add('highlight');<i>
</i>
`</CODE>

After it you can write CSS for that

<CODE>
`<i>
</i>&lt;style&gt;
.highlight {
font-weight: 20Px;
color: Blue;
}
&lt;/style&gt;<i>
</i>
``
×

Success!

Help @GRman45 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...