var в HTML


Тег VAR

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Тег используется для выделения переменных компьютерных программ. Браузеры обычно помечают контент в контейнере курсивным начертанием.

Синтаксис

Закрывающий тег

Параметры

Пример 1. Использование тега

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ниже.

Рис. 1. Вид контента, оформленного с помощью тега

в HTML

Тег применяется для обозначения переменных или аргументов каких-либо функций. Как правило, браузеры отображают текст в элементе курсивным шрифтом.

Атрибуты

Личные атрибуты: нет.

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

отображать текущее значение var в HTML

0 arii [2020-10-10 10:40:00]

У меня есть переменная speed управляемая пользователем с клавиатуры, и я хочу постоянно показывать ее текущее значение.
Я пытался:

но я получаю только speed = 1 и она никогда не менялась.

Есть ли способ сохранить отображаемое значение, не создавая функцию, которая срабатывает каждый раз, когда пользователь меняет скорость и выполняет document.getElementById(). снова?

3 ответа

2 Решение Ahs N [2020-10-10 10:44:00]

Почему бы не использовать setInterval для обновления значения следующим образом:

Это обновит значение каждые 1 секунду (1000 мс).

0 bash0ne [2020-10-10 10:45:00]

Я думаю, что это не так. Возможно, вам придется использовать функцию и событие. Потому что, как вы знаете или инициируете некоторые вычисления, когда вы не знаете, в какой момент пользователь ввел некоторые ключи?

ОБНОВЛЕНИЕ: Как вы, возможно, знаете, что setInterval/setTimeout являются злыми!

Если вы посмотрите на эту ссылку, вы увидите, что вам следует избегать этих функций по не очень веским причинам. Упрощенная:

. Первый аргумент — это строка, вы фактически передаете ей некоторый JavaScript, который будет оцениваться в глобальном пространстве имен, когда истечет таймер. Снова прочитайте зло эвалей выше, а затем вернитесь. Хорошо, что вам не нужно передавать строку кода JavaScript.

0 Jota Ge [2020-10-10 10:43:00]

Вы получаете только начальное значение, потому что вы вызываете только один раз этот код.

Как вы сказали, если вы хотите изменить значение, вам нужно будет создать вызов этой функции, чтобы обновить значение.

HTML Tag

The tag describes variable in a mathematical expression or a programming context. Its content is usually presented in an italicized version of the current typeface.

Other elements that are used for describing technical parts of the documents in the contexts in which is generally used include:

  • the tag, which defines a piece of computer code
  • the tag, which defines sample output from a computer program or script
  • the tag, which defines keyboard output

Syntax

The tag comes in pairs. The content is written between opening ( ) and closing ( ) tags.

HTML Tag

Sharing is caring!

Code Example

The equation for any straight line can be expressed in the formula: y = mx + b .

When to use


The element is used to identify a variable. There are at least three scenarios where use of this element is appropriate:

  • To wrap variables in a mathematic equation, as shown in the code sample above.
  • To identify variables in a snippet of computer programming code.
  • To identify variables used in paragraph text or prose.

The first two scenarios are pretty self-explanatory, the third scenario might look something like this:

If we consume n cookies on average, every day, will need to exercise y more minutes every day to burn off those extra calories.

Нативные переменные в CSS. Уже пора…

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.

Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову. ). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.

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

Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
—variable-name

Чтобы использовать переменную, необходимо воспользоваться функцией var. Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.

На этом набор новых возможностей с приходом переменных, разумеется, не заканчивается. Имея переменные в арсенале CSS, мы получаем большую гибкость в написании стилей. Например, теперь чтобы составить медиазапрос для экранов Ремарка

Используя переменные, изменять css извне стало проще, методов использования можно придумать массу, а мы пойдем дальше.

Области видимости

Нужно сказать пару слов об области видимости CSS переменных, здесь всё просто. Объявленная переменная доступна всем селекторам дочерних элементов данного селектора. Т.е. в листинге ниже использовать переменную —b в тэге html будет нельзя. А вот переменная —a в body и всех дочерних элементах будет работать без проблем (если её конечно не переопределят где-то ниже).

(я знаю, что цвета в примерах скучные, но я плохо помню цвета по hex-коду :))

Переменные и calc

Как и любое числовое значение свойства, вы можете использовать переменную в функции calc.

Круто! Особенно если учесть что переменную —title-width, можно менять как внутри CSS, так и извне.

Заметьте, что величину мы обязаны положить в переменную. Дописать px, %, rem и т.д. к вызванной переменной у нас не получится. Однако ничто не мешает нам умножить с помощью функции calc значение на единицу в необходимой нам величине.

В заключение

CSS переменные дают много гибкости, это мощный инструмент, который может быть очень полезен в ряде случаев. Однако спешить его применять в боевых проектах я не рекомендую. Если мы заглянем на caniuse, то увидим что IE вообще не поддерживает данную технологию, а Edge частично.

Убрать var CSS из :root может оказаться хорошей идеей

Дата публикации: 2020-04-19

От автора: пользовательские свойства CSS уже давно стали горячей темой с множеством замечательных статей о них, от прекрасных пособий о том, как они работают, до креативных руководств о том, что реально можно создать с их помощью. Если вы прочитали более одной или двух статей по этой теме, то я уверен, что вы заметили, что примерно в 99% случаев они начинают с настройки CSS root var.

В то время как размещение пользовательских свойств для :root отлично подходит для вещей, которые должны быть доступны на вашем сайте, бывают случаи, когда более целесообразно размещать пользовательские свойства локально. В этой статье мы будем исследовать:

Почему мы ставим переменные для :root в начало.

Почему глобальный охват не подходит для всего.

Как преодолеть влияние классов с помощью локальных свойств

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как обстоят дела с пользовательскими свойствами и :root?

Прежде чем мы перейдем к рассмотрению глобальной области действия, я думаю, что стоит рассмотреть, почему все в начале устанавливают пользовательские свойства для :root. Я объявлял пользовательские свойства для :root даже не задумываясь. Практически все это делают, даже не упоминая почему, включая официальную спецификацию.

Субъект :root упоминается, как то же самое, что html, но с более высокой специфичностью, и это все. Но имеет ли значение эта более высокая специфичность? На самом деле, нет. Все, что он делает, это выбирает html с более высокой специфичностью, точно так же, как селектор класса имеет более высокую специфичность, чем селектор элемента при выборе div.

Основная причина этого заключается в том, что CSS используется не только для оформления HTML-документов. Он также используется для файлов XML и SVG.

В случае XML и SVG файлов :root выбирает не элемент html, а его корень (например, тег svg в файле SVG). Из-за этого наилучшей практикой для настраиваемого свойства в глобальном масштабе является :root. Но если вы создаете сайт, вы можете добавить его в селектор html и не заметить разницы.

Тем не менее, с каждым использованием :root, он быстро стал «стандартом». Он также помогает отделить переменные для последующего использования от селекторов, которые активно оформляют документ.

Почему глобальный охват не подходит для всего

С помощью препроцессоров CSS, таких как Sass и Less, большинство из нас хранят переменные в выделенном для них раздел. Это прекрасно работает, так почему мы должны внезапно рассматривать локальные переменные? Одна из причин заключается в том, что некоторые люди могут найти что-то подобное.

Конечно, это дает нам место, из которого мы можем управлять стилями с помощью пользовательских свойств. Но зачем нам определять —header-color или —header-shadow для :root? Это не глобальные свойства, я явно использую их в заголовке и нигде больше. Если это не глобальное свойство, зачем определять его глобально? Вот где в игру вступает локальная область видимости.

Свойства в локальной области действия

Допустим, у нас есть список стилей, но наш сайт использует систему иконок — скажем, Font Awesome для простоты. Мы не хотим использовать disc для маркеров ul — нам нужна собственная иконка! Если я хочу отключить маркеры неупорядоченного списка для иконок Font Awesome, мы можем сделать что-то вроде этого:

Хотя это очень просто сделать, одной из проблем является то, что иконка становится абстрактной. Если мы не будем использовать Font Awesome реально много, мы можем не знать, что значит f14, не говоря уже о том, чтобы быть в состоянии идентифицировать ее, как иконку флажка. Это семантически бессмысленно. Мы можем уточнить вещи с помощью пользовательского свойства.

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

Затем в CSS мы можем создать пользовательские свойства для разных иконок:

Реальная сила локальной области видимости пользовательских свойств проявляется, когда мы фактически хотим применить иконки. Мы можем установить для списка пунктов content: var(—icon):

Затем мы можем определить эту иконку для каждого из списков с более осмысленными именами:

Мы можем сделать это на ступеньку выше, добавив цвета:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!


Перемещение иконок в глобальную область видимости

Если мы работаем с системой иконок, такой как Font Awesome, то я предполагаю, что мы будем использовать их не только для замены маркеров в неупорядоченных списках. Пока мы используем их более чем в одном месте, имеет смысл перемещать иконки в то место :root, которое нам нужно, чтобы они были доступны глобально.

Наличие иконок в :root не означает, что мы по-прежнему не можем использовать преимущества пользовательских свойств локальной области!

Добавление резервных вариантов

Мы можем либо добавить иконку по умолчанию, установив ее как резервный вариант (например var(—icon, «/f1cb»)), либо, поскольку мы используем свойство content, мы можем даже добавить сообщение об ошибке var(—icon, «no icon set»).

Используя переменные —icon и —icon-color локально, мы значительно увеличили читаемость кода. Если кто-то новый придет в проект, им будет намного легче понять, как он работает.

Конечно, это не ограничивается Font Awesome. Локальная область видимости пользовательских свойств также отлично подходит для системы иконок SVG:

Использование ограниченных локально свойств для большей модульности кода

В то время как пример, который мы только что рассмотрели, хорошо подходит для повышения читабельности кода — что удивительно — мы можем сделать намного больше с помощью свойств локальной области видимости.

Некоторым людям нравится CSS как есть; другие ненавидят работать с глобальным охватом каскада. Я здесь не буду обсуждать CSS-in-JS (достаточно умных людей уже пишут об этом), но пользовательские локальные свойства дают нам фантастическое промежуточное решение.

Используя преимущества пользовательских свойств в локальной области, мы можем создать очень модульный код, который сэкономит нам много усилий при попытке найти значимые имена классов. Давайте рассмотрим конкретный сценарий.

Отчасти причина разочарования людей в CSS заключается в том, что следующая разметка может вызвать проблемы, когда мы хотим что-то стилизовать.

Если создать стиль для класса .title, он будет стилизовать одновременно и элементы содержащие .card, и классы .cta. Мы можем использовать составной селектор (то есть .card .title), но это повышает специфичность, что может ухудшить поддерживаемость. Или мы можем принять подход BEM и переименовать класс .title в .card__title и .cta__title, чтобы больше изолировать эти элементы.

Пользовательские свойства локальной области видимости предлагают нам отличное решение. Мы можем применить их к элементам, для которых они будут использоваться:

Затем мы можем контролировать все, что нам нужно, в родительских селекторах соответственно:

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

Мы могли бы даже использовать calc(), чтобы добавить для кнопки масштаб, что потенциально может помочь избавиться от таких классов, как .btn-sm, btn-lg (или эти классы могут собираться в зависимости от ситуации).

Вот более детальный обзор всего этого в действии:

Обратите внимание, что в приведенном выше примере я использовал некоторые общие классы, такие как .title и .button, которые имеют стили с локальными областями действия (с помощью резервных вариантов). Настроив для них пользовательские свойства, я могу определить их локально в родительском селекторе, эффективно назначая каждому свой стиль без необходимости дополнительного селектора.

Я также настроил карты прайсов с классами модификаторов для них. Используя универсальный класс .pricing, я все настроил, а затем, используя классы модификаторов, я переопределил некоторые свойства, такие как —text, и —background, не беспокоясь об использовании составных селекторов или дополнительных классов.

Работая таким образом, вы получаете очень удобный код. Мы легко можем изменить цвет свойства, если нам нужно, или даже создать совершенно новую тему или стиль, как, например, вариант разноцветной карты прайса.

При первоначальной настройке требуется немного предусмотрительности, но отдача может быть ошеломительной. Это может даже показаться нелогичным с точки зрения того, как вы привыкли подходить к стилям, но в следующий раз, когда вы перейдете к созданию пользовательского свойства, попробуйте сохранить его локально, если ему не нужно функционировать глобально, и вы начнете понимать, как полезно это может быть.

Автор: Kevin Powell

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

HTML Tag

Sharing is caring!

Code Example

The equation for any straight line can be expressed in the formula: y = mx + b .

When to use

The element is used to identify a variable. There are at least three scenarios where use of this element is appropriate:

  • To wrap variables in a mathematic equation, as shown in the code sample above.
  • To identify variables in a snippet of computer programming code.
  • To identify variables used in paragraph text or prose.

The first two scenarios are pretty self-explanatory, the third scenario might look something like this:

If we consume n cookies on average, every day, will need to exercise y more minutes every day to burn off those extra calories.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Илья Кантор, 21 мая 2009 — 13:26

Объявить переменную (или несколько) в текущей области видимости

Синтаксис

Аргументы

Описание, примеры

Область видимости переменной — текущая функция. Если переменная объявлена вне функции, то ее область видимости — глобальный объект window.

Здесь javascript похож на традиционные языки программирования

В отличие от большинства языков, javascript блок не задает область видимости.

Переменная внешней функции видна во внутренней, благодаря наличию замыканий.


См. также

  • Замыкания /Статья/
  • Блок /Синтаксическая конструкция/

А почему следующая конструкция выдает синтаксическую ошибку?

Почему нельзя делать объявление переменной внутри if?

If предполагает сравнение чего-то с чем-то, а в данном примере «=» использыется как оператор сравнения, а как оператор присваивания.

По вашей логике тоже самое без var не должно работать. А это не так.

Операцию присвоения можно использовать как логическое выражение, вот только возвращать она всегда будет true (за некоторыми исключениями)

Подписываюсь под каждым словом вышестоящим словом

Я думаю надо сменить на сайте фон. Он грузовой какой то. У него даже запах есть стухшего энтузиазма.

Есть новый сайт с новым дизайном. Постараюсь ускорить его разработку, он в принципе почти в бете уже, только доступ по «инвайтам».

Добрый день подскажите пожалуйста почему вот так выводится значение переменной y

А если в функцию вставить if, то не выдает undefined, до тех пор пока мы не объявим переменную в самой функции. Почему он не берет значение переменной y из глобальной видимости?

В первом примере не закрыта скобка у функции fu.
Вот так

Выводит 10, как и положено.

На второй вопрос
> Почему он не берет значение переменной y из глобальной видимости?

Отвечаю — потому, что в теле функции присутствует

Т.е. свое объявление переменной y.

Помогите пожалуйста, в java вообще не соображаю, как переменную из php поставить в замен ‘1 день’ и 100? P.S. в коментах моя жалкая попытка.
var data = google.visualization.arrayToDataTable([
[‘дни’, ‘Сумарное время’],
[‘1 день’, 100],
[‘2 день’, 20],
[‘9 день’, 20]
// [ ‘ var a = ‘ ; »,
// var b = ‘ ; ‘]
] );

Это учебник по JavaScript. Про PHP ответят в другом месте.

Заранее извиняюсь за нубские вопросы.
1) Почему в данном случае инкремент выдаёт NaN?
2) Получается, что нужно обязательно проводить инициализацию переменной, а не просто её объявление? ( var counter = 0; || var counter = new Number(); )?

Но там же и написано
————————-
++ (Инкремент)
Увеличивает переменную, к которой применен, на единицу.
————————-

Делаем вывод — это сокращенная форма от

И с неопределенной переменной эти операции будут давать
counter is not defined

что-то измениться если переменные объявлять без var?
т.е. есть разница между var a = «abc» и a = «abc» ?

Бывает js не работает при загрузке web-странички через Notepad++, но при этом точно такой же код хорошо отображается в этом конструкторе:
https://codepen.io

С чем это связано?

Объявлять переменные нужно правильно, в общем разрабатывать на Javascript достаточно просто.

Как в js нажимая на кнопку тебя перебрасывало на рандомную гиперссылку?

HTML var tag and element

1. HTML var element represents a variable in a mathematical expressing or an argument in a piece of code.

Syntax

Category

HTML var element is a Phrase element.

Whether both start and end tags are required

Can contain

HTML var element can contain inline elements.

Can reside within

HTML var element can reside within inline as well as block level elements.

Attributes

Attributes specific to this element

Identifiers

language information and text direction

Title

Style

Events

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of using HTML var element

Result

View this example in a separate browser window

Илон Маск рекомендует:  Что такое код asp allowanonymous
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL