Вопрос:

Как сделать часть CSS-класса динамической и передать ей значение?

html css

79 просмотра

1 ответ

967 Репутация автора

У меня есть несколько ссылок в заголовке моего проекта MVC, который имеет стиль, который показывает значок по ссылке и добавляет в него вейл. например рассмотрим этот код:

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

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

Вот как это выглядит:

введите описание изображения здесь

У меня это работает со всеми числами, например, если я изменяю 13 на 18, как: icon-alert-18, он показывает 18 на значке.

Это стиль:

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

}

Как я могу сделать число частью class = "icon-alert-18" как переменную, чтобы я мог передать значение из моего кода и получить значок, заполненный значением, которое я передаю?

Также это в мобильной разработке.

Автор: Alma Источник Размещён: 22.08.2016 08:46

Ответы (1)


1 плюс

3891 Репутация автора

Допустим, у вас есть переменная с именем, alertNumberи она содержит число, которое вы хотите отобразить на своем значке.

Вы можете получить свой значок с помощью любой из функций DOM:

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

Объявите классы, которые вы всегда хотите, чтобы ваш элемент имел, например:

const defaultNumbersIconClasses = "foo";

Вы можете передать эту переменную в функцию, которая изменяет класс элементов следующим образом:

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

Первая строка внутри функции устанавливает классы элемента в классы по умолчанию, которые вы указали.

Второй добавляет icon-alert-плюс ваш номер в качестве нового класса.

Теперь вы можете использовать эту функцию для любого типа события, например, для onclickсобытия:

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

Надеюсь, что это помогло!

Автор: Fausto NA Размещён: 22.08.2016 09:02
Вопросы из категории :
32x32