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

Question

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:

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.

Are you using any kind of MVC library or framework or is it plain HTML/CSS/JS? — fnune
– fnune, Commented Aug 22, 2016 at 20:48
I didn't develop the CSS/JS part so it is ready for me to use. I really don't know what they have used. — Alma
– Alma, Commented Aug 22, 2016 at 20:50
If you need the value to come from server-side, you could store it in a HiddenField on pageload and get its value using javascript. You can store that in a variable and append it to "icon-alert-", and then add that class to your element. — Tyler Roper
– Tyler Roper, Commented Aug 22, 2016 at 20:55
@TylerRoper Roper How I can have a class that append a value to icon-alert and call it? as my values are in my page but this menu is in header.cshtml. — Alma
– Alma, Commented Aug 22, 2016 at 21:00

fnune · Accepted Answer · 2016-08-22 21:02:13Z

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!

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related