CODEWITHSUNDEEP
htmlcss
Alma
Alma

Reputation: 4400

How make a part of CSS class dynamic and send value to it?

I have some links in Header of my mvc project that has a styling which shows an icon by a link and add vale inside it. for example consider this code:

<span class="icon-alert-13"></span>

<a href="@Url.Action("Document","Document")" class="documents-view"><span class="icon-docs"></span>documents</a>

This is how it looks like:

enter image description here

I have this working with all the numbers for example if I change 13 to 18 like :icon-alert-18 it shows 18 in the icon.

This is style:

.icon-alert-18:before {
 content: '\0030';

}

How I can make number part of class="icon-alert-18" as variable so I can pass value from my code and get the icon populated with the value I pass?

Also this is in Mobile development.

Upvotes: 1

Views: 145

Answers (1)

fnune
fnune

Reputation: 5494

Let's say you have a variable called alertNumber and it holds the number you want to display in your icon.

You can fetch your icon with any of the DOM functions:

const numbersIcon = document.getElementById("numbersIcon");

Declare classes that you always want your element to have, for example:

const defaultNumbersIconClasses = "foo";

You can pass that variable to a function that changes the class of the elements like this:

function updateIconTo(number) {
    numbersIcon.className = defaultNumbersIconClasses;
    numbersIcon.classList.add("icon-alert-" + number);
}

The first line inside the function sets the classes of the element to the default classes you have specified.

The second one adds icon-alert- plus your number as a new class.

You can now use that function on whatever type of event you like, for example, an onclick event:

<span onclick="updateIconTo(alertNumber)" id="numbersIcon" class="icon-alert-13"></span>

Hope that helped!

Upvotes: 1

Related Questions