Take class string and add inline css with Javascript

Question

I have the next output code:

<div class="post-term">
  <a href="/term/1" class="color-cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999">historical</a>
</div>

How to take string after "color-" in class attribute and add css background-color inline style?

The resulting code should be:

<div class="post-term">
  <a href="/term/1" style="background-color: #cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" style="background-color: #999999">historical</a>
</div>

I'm using Drupal Views so just can add css class attribute to target string with Javascript.

The problem with different codes I tried is that only changes correctly the first class and the next ones just drop the string. Let me explain better in the next resulting output code:

<div class="post-term">
  <a href="/term/1" style="background-color: #cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-">historical</a>
</div>

Thanks a lot in advance.

That's not what classes are for. You should probably use a data- attribute. — wizzwizz4
– wizzwizz4, Commented Jul 23, 2018 at 6:47
Why did you prefer the jQuery answer when you could pick a non-jQuery one as well? — connexo
– connexo, Commented Jul 23, 2018 at 20:56
Hi @connexo. I chose both but Jquery answer was the last one and it was the one that remained. I didn't know only can choose one right answer. Honestly, Jquery answer is nicer to me and Drupal uses Jquery, but question was about Javascript so your answer is the one that best fits. — Bahsite
– Bahsite, Commented Jul 26, 2018 at 20:59

connexo · Accepted Answer · 2018-07-23 07:22:27Z

4

Beforehand: As @wizzwizz4 mentioned, you're misusing the css class attribute here. It'd be better to declare that as a data-attribute.

Fetch your link elements using document.querySelectorAll and an appropriate CSS selector, iterate over the array you create from the nodelist you're getting and set the background-color programmatically like this:

const postlinks = Array.from(document.querySelectorAll('.post-term a'));

for (const postlink of postlinks) {
  postlink.style.backgroundColor = `#${postlink.className.split('-')[1]}`;
}

<div class="post-term">
  <a href="/term/1" class="color-cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999">historical</a>
</div>

<div class="post-term">
  <a href="/term/1" class="color-00cc00">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-0000cc">historical</a>
</div>

<div class="post-term">
  <a href="/term/1" class="color-000000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-dddddd">historical</a>
</div>

If you want to remove the class attribute (like your target code suggests), add the following line inside the for .. of loop:

postlink.removeAttribute('class');

edited Jul 23, 2018 at 7:22

answered Jul 23, 2018 at 6:49

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

3 Comments

Bahsite Over a year ago

Your code works well but I don't know why drop the color code after "color-" after the first class change. Please, see question update. Thanks a lot.

connexo Over a year ago

It works for any number of links, I've just added some to the sample code here. I have no clue as of why you're getting the result you added to your post. Which browser are you observing that in?

Bahsite Over a year ago

I'm testing on Firefox, Chrome and Edge. I think is a Drupal issue but I don't understand how is it possible because last week was working well with a Javascript code that I removed by mistake :(

Sangram Nandkhile · Accepted Answer · 2018-07-23 07:02:31Z

1

Though, it is a good practice to use data-attributes for storing such data, you can do it using class attribute as well

$('.post-term a').each(function(){
 $(this).css('background-color','#'+$(this).attr('class').split('-')[1]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-term">
  <a href="/term/1" class="color-cc0000" data-color='cc0000'>historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999" data-color='999999'>historical</a>
</div>

edited Jul 23, 2018 at 7:02

answered Jul 23, 2018 at 6:56

Sangram Nandkhile

18.2k19 gold badges85 silver badges116 bronze badges

3 Comments

Bahsite Over a year ago

I'm using Drupal Views, It only allows add class attribute.

Sangram Nandkhile Over a year ago

@Bahsite in that case, here you go

Bahsite Over a year ago

Your code works well and looks pretty narrow to me, but I don't know why drop the color code after the first "color-" class change. Please, see question update. Thanks a lot Sangram.

alexP · Accepted Answer · 2018-07-23 07:11:17Z

0

In case you have not just color-999999 in a class, but color-999999 foo or foo color-999999 and the parent name is not .post-term every time

var aElements = $("a").filter(function() {
  return $(this).attr("class").match(/color\-/);
});

$.each(aElements, function(index,el){
	let col = el.getAttribute("class").match(/color\-[a-z0-9]{6}/)[0].split("-")[1];
        el.setAttribute("style", "background-color: #" + col + ";");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="post-term">
  <a href="/term/1" class="color-cc0000 foo">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="foo color-999999">historical</a>
</div>

answered Jul 23, 2018 at 7:11

alexP

3,7657 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Take class string and add inline css with Javascript

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related