Как сделать переменную в html
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Переменные CSS задаются с помощью функции var(). Для их использования необходимо сначала задать переменную в одном из селекторов, а затем применить ее в качестве значения свойства для элемента. Это похоже на понятие константа в некоторых языках программирования.
Здесь мы в произвольном селекторе wrapper задали переменную maincolor (ее имя всегда обозначается двумя дефисами впереди), а затем использовали ее, чтобы задать фоновый цвет для кнопки button .
Таким образом можно использовать переменные для хранения повторяющихся величин. Наиболее удобно их применять для повторяющихся цветов, поскольку для сайта обычно используется несколько повторяющихся значений цветов.
Синтаксис
Как уже сказано выше имя переменной должно начинаться с двух дефисов. Второй параметр является резервным и применяется, если переменная не определена.
Пример использования
Пусть у нашего сайта будут хедер, футер, а также кнопка и заголовок. Все они должны выводиться в едином цвете.
С помощью переменных (еще их называют кастомные свойства) можно задавать любые значения: величину шрифта или его семейство, размеры элемента и т.д.
Область видимости
Область видимости переменной ограничен селектором, в котором она определена. В том числе она будет доступна и в контейнерах, вложенных в контейнер с этим селектором. То есть применимо наследование.
Чтобы определить переменные с глобальной видимостью нужно использовать псевдокласс :root (соответствует элементу ). Например:
Резервные значения
Как уже говорилось, резервные значения используются, когда переменная не определена или браузер их не поддерживает.
При этом в качестве резервного значения можно использовать вложенные значения, например:
Поддержка браузерами
Сервис CanIUse показывает, что в настоящее время уровень поддержки это свойства составляет 66,2%. При этом оно поддерживается последними версиями основных браузеров, Google Chrome, FireFox и т.д., поэтому считаю, его можно использовать при работе с сайтами.
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов , и . Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.
Теги и
Тег отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как ,
Тег используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.
В некоторый html-тег нужно в data-параметр вставить значение переменной, которая определяется и инициализируется ниже. Я делаю так:
Можно ли так делать? У меня не работает почему-то
Что вы хотите сделать? У вас в коде атрибут data-parameter является просто строкой, а дальше в коде js вы просто объявляете переменную и присваиваете ей некоторый массив объектов.
1 ответ 1
Так как вы сделали - нельзя. Нужно приблизительно так:
(использую jQuery, т.к. не знаю, как изменить атрибут тега на чистом js)
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.25.41261
Переменные в CSS или на английском CSS Custom Properties, что в переводе звучит, как пользовательские свойства CSS, - это специальные css-свойства, которые позволяют изменять значения любых других css-свойств динамически. CSS переременные подобны переменным в JavaScript. Сейчас css-переменные поддерживаются всеми современными браузерами. Можно сказать, что их появление было продиктовано еще препроцессорами, и то, что они были добавлены в спецификацию CSS - большой шаг вперед.
Переменные в CSS, или пользовательские свойства, имеют огромный потенциал для изменения кода и структуры CSS. Давайте рассмотрим стратегии получения максимальной пользы от переменных CSS.
Схожесть css-переменных с переменными в препроцессорах
Пользовательские свойства немного похожи на переменные в препроцессорах, но имеют некоторые важные отличия. Первое и самое очевидное отличие - это синтаксис.
В синтаксисе SASS (SCSS) мы используем символ доллара для обозначения переменной:
Для Less нужно использовать символ @ :
Однако, препроцессорные переменные имеют некоторые ограничения:
- Их нельзя изменять динамически. .
- Они не могут быть прочитаны или изменены с помощью JavaScript.
Поэтому стоит изучить, что такое переменные CSS, и затем использовать их в коде.
CSS-переменные имеют синтаксис, похожий на переменные в SASS или Less, и используют префикс в виде 2-х дефисов:
Значение свойства может быть любым допустимым значением CSS: цветом, строкой, значением макета, даже выражением.
Чтобы добавить использование переменной в код, необходимо записать так:
Еще несколько вариантов назначения css-переменных. Первый из них подразумевает использование глобальной видимости переменных, которые назначаются для :root :
Что касается элемента :root , то в HTML это то же самое, что и корневой тег html , но с более высокой специфичностью.
Для использования CSS-переменных необходимо указать в соответствующем свойстве функцию var() с нужной переменной в скобках:
Вы можете объявлять переменные внутри любого элемента. Тогда они будут привязаны к этому элементу и его дочерним элементам. Использовать переменные можно следующим образом:
В примере ниже мы используем переменную из класса .box в классе .my-test , в который вложен .box . И не увидим, что эта переменная не применилась, т.к. для родительского .my-test она не видна.
Результат работы переменной не виден:
На скриншоте видно, что в свойстве переменная выделена серым цветом. Это значит, что она не была найдена и использована браузером.
Для вложенного элемента цвет переменной в инспекторе свойств другой - и мы видим на странице, что к нему добавилась точечная рамка.
Особенности объявления css-переменных и их использования
Функция var() - это удобный способ предоставить значение по умолчанию. Вы можете сделать это, если не уверены, определено ли настраиваемое свойство и хотите ли вы указать значение, которое будет использоваться в качестве резерва. Это можно сделать легко, передав второй параметр функции:
Кроме того, вы можете повторно использовать другие переменные для объявления новых:
Арифметические операции: +, -, * и функция calc()
Поскольку мы привыкли к препроцессорам и другим языкам, мы хотим иметь возможность использовать базовые операторы при работе с переменными. Для этого CSS предоставляет функцию calc() , которая заставляет браузер пересчитать выражение после внесения каких-либо изменений в значение настраиваемого свойства:
Вы можете столкнуться с проблемами, если попытаетесь использовать значение без единицы. В этой ситуации вам не обойтись без функции calc() - она ваш друг, потому что без нее код не будет работать:
Рассмотрим пример, в котором мы можем изменить размер шрифта кнопок, исходя из одной переменной и используя функцию calc() для расчета других величин на основе нашей единственной переменной:
Попробуйте самостоятельно изменить шрифт, изменяя значения в CSS.
Области видимости и наследование
Прежде чем говорить о областях пользовательских свойств CSS, давайте вспомним области JavaScript и препроцессоры, чтобы лучше понять различия.
Мы знаем, что, например, с переменными JavaScript, которые определяются ключевым словом var , область действия ограничена функциями.
Мы имеем аналогичную ситуацию с let и const , но они являются локальными переменными масштаба блока.
Замыкание в JavaScript - это функция, которая имеет доступ к внешним (охватывающим) функциям - цепочке областей. Замыкание имеет три цепочки областей и имеет доступ к следующему:
- его собственная область видимости (т. е. переменные, определенные между его фигурными скобками)
- переменные внешней функции,
- глобальные переменные.
История с препроцессорами схожа. Давайте используем SASS в качестве примера, потому что это, вероятно, самый популярный препроцессор сегодня. С SASS мы имеем два типа переменных: локальные и глобальные.
Глобальная переменная может быть объявлена вне любого селектора или конструкции (например, как mixin). В противном случае переменная будет локальной.
Любые вложенные блоки кода могут обращаться к окружающим переменным (как в JavaScript).
Это означает, что в SASS области действия переменной полностью зависят от структуры кода.
Однако пользовательские свойства CSS наследуются по умолчанию, и, как и другие свойства CSS, они каскадные.
Вы также не можете иметь глобальную переменную, которая объявляет пользовательское свойство вне селектора - это не допустимый CSS. Глобальная область действия для пользовательских свойств CSS на самом деле является корневой областью действия, после чего свойство доступно глобально.
Динамическое изменение css-переменных
Давайте использовать наши знания синтаксиса и адаптировать пример SASS к HTML и CSS. Мы создадим демонстрационную версию, используя собственные пользовательские свойства CSS. Во-первых, HTML:
Читайте также: