Как изменить значение атрибута через css - Исправление ошибок и поиск оптимальных решений проблем

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

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

[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }

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

В примере 13.1 показано изменение стиля тега <q>,
в том случае, если к нему добавлен атрибут title.

Пример 13.1. Вид элемента в зависимости от его атрибута

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "0AB" "0BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница 
   будет корректно отображаться в одном браузере, выяснится, 
   что она неправильно показывается в другом</q>.</p>

 </body>
</html>

Результат примера показан на рис. 13.1.

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>,
когда к нему добавляется title. Обратите
внимание, что для селектора Q[title] нет нужды повторять стилевые
свойства, поскольку они наследуются от селектора Q.

Атрибут со значением

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

[атрибут=»значение»] { Описание правил стиля }
Селектор[атрибут=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем тегам, которые содержат указанное
значение. А во втором — только к определённым селекторам.

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При
этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей
добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[target="_blank"] { 
    background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Обычная ссылка</a> | 
   <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 13.2).

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

В данном примере рисунок к ссылке добавляется с помощью свойства background.
В его функции входит создание повторяющейся фоновой картинки, но повторение
фона можно отменить через значение no-repeat, что
в итоге даст единственное изображение.

Значение атрибута начинается с определённого текста

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

[атрибут^=»значение»] { Описание правил стиля }
Селектор[атрибут^=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок —
ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются
добавлением к адресу протокола, например, для доступа к гипертекстовым документам
используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A,
как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href^="http://"] { 
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <p><a href="1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>

Результат примера показан ниже (рис. 13.3).

Рис. 13.3. Изменение стиля для внешних ссылок

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

Значение атрибута оканчивается определённым текстом

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

[атрибут$=»значение»] { Описание правил стиля }
Селектор[атрибут$=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным
текстом. А во втором — только к определённым селекторам.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для
ссылок на сайты других доменов вроде com, как показано в примере 13.4.

Пример 13.4. Стиль для разных доменов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
  
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com
и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая
картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com».
Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес
страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль
применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

Значение атрибута содержит указанный текст

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

[атрибут*=»значение»] { Описание правил стиля }
Селектор[атрибут*=»значение»] { Описание правил стиля }

В примере 13.5
показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | 
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

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

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.

[атрибут~=»значение»] { Описание правил стиля }
Селектор[атрибут~=»значение»] { Описание правил стиля }

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).

Пример 13.6. Стиль в зависимости от имени класса

HTML5CSS 2.1IECrOpSa 5Fx

<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Блок</title> 
  <style> 
   [class~="block"] h3 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div class="block tag"> 
   <h3>Заголовок</h3> 
  </div> 
 </body> 
</html>

В данном примере зелёный цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

[атрибут|=»значение»] { Описание правил стиля }
Селектор[атрибут|=»значение»] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div class="block-menu-therm">
   <h2>Термины</h2>
   <div class="content">
     <ul class="menu">
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }
Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

INPUT[type=»text»] { background: #acdacc; }
INPUT[type=»textinput»] { background: #acdacc; }
INPUT[type=»textfield»] { background: #acdacc; }
INPUT[type=»textarea»] { background: #acdacc; }
INPUT[type=»texts»] { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p class=»text text1-count1-text»>Первый абзац</p>
<p class=»text text2-count2-text»>Второй абзац</p>
<p class=»text text3-count3-text»>Третий абзац</p>

P[class|=»text2″] { color: red; }
P[class^=»text2″] { color: red; }
P[class~=»text2″] { color: red; }
P[class*=»text2″] { color: red; }
P[class$=»text2″] { color: red; }

3. К какому элементу будет применяться следующий стиль?

[class~=»lorem»] { background: #666; }

<p class=»lorem-ipsum»>Lorem ipsum dolor sit amet</p>
<div class=»lorem-ipsum dolor»>Lorem ipsum dolor sit amet</div>
<p class=»ipsum-lorem»>Lorem ipsum dolor sit amet</p>
<div class=»lorem ipsum»>Lorem ipsum dolor sit amet</div>
<p><span class=»1orem ipsum»>Lorem ipsum dolor sit amet</span></p>

Ответы

1. INPUT[type=»text»] { background: #acdacc; }

2. P[class*=»text2″] { color: red; }

3. <div class=»lorem ipsum»>Lorem ipsum dolor sit amet</div>

Источник

Всем привет

Сделал кнопку пуск/пауза для сайта, вот минимальный код:

body {
  background-color: #494949;
}

.play-button {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background-color: #888;
  color: green;
  font-size: 30px;
  text-align: center;
  width: 1.2em;
  padding: .2em;
  border-radius: 10%;
  cursor: pointer;
  appearance: none;
}

.play-button:after {
  content: "25B6";
}

.play-button:checked:after {
  content: "23F8";
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="checkbox" class="play-button" title="play">
</body>

</html>

Всё работает без js, только не могу найти как после нажатия кнопки менять значение атрибута title. Возможно ли это сделать средствами CSS?

задан 8 мар 2022 в 17:48

С помощью CSS нельзя изменять атрибуты элементов. Можно попробовать имитировать подсказку, используя псевдоэлемент:

Также не рекомендуется использовать HTML-символы, ибо они есть не в каждом шрифте. Или если шрифт не прогрузиться, то оба состояния кнопки будут иметь не те символы, которые ожидаются. Лучше делать такие фигуры через CSS, SVG или картинку.

ответ дан 9 мар 2022 в 10:21

UModeLUModeL

30.1k5 золотых знаков27 серебряных знаков65 бронзовых знаков

Я сам много пытался найти где способ поменять title, но боюсь что через CSS, атрибут title никак не поменять, вы можете это сделать с помощью JS:

document.querySelector(".play-button").addEventListener("click", function(){
    if(this.getAttribute("title") === "playing"){
        this.setAttribute("title", "play")
    }else{
        this.setAttribute("title", "playing")
    }
});

body {
  background-color: #494949;
}

.play-button {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background-color: #888;
  color: green;
  font-size: 30px;
  text-align: center;
  width: 1.2em;
  padding: .2em;
  border-radius: 10%;
  cursor: pointer;
  appearance: none;
}

.play-button:after {
  content: "25B6";
}

.play-button:checked:after {
  content: "23F8";
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="checkbox" class="play-button" title="play">
</body>

</html>

ответ дан 9 мар 2022 в 10:08

ΝNL993ΝNL993

2,5141 золотой знак8 серебряных знаков22 бронзовых знака

Источник

Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов <input>. Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.

Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.

Селектор [attribute]

Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.

[title] { border-bottom: 1px dotted blue; }

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

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

a[target] { font-weight: bold; }

В данном случае выбираются только элементы <a>, к которым добавлен атрибут target с произвольным значением.

В примере 1 показано изменение стиля элемента <textarea>, когда к нему добавляется атрибут readonly.

Пример 1. Вид элемента в зависимости от его атрибута

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
textarea {
height: 100px; /* Высота поля */
}
textarea[readonly] {
background: #f0f0f0; /* Цвет фона */
opacity: 0.8; /* Значение прозрачности */
}
</style>
</head>
<body>
<textarea>Это обычное текстовое поле, его можно редактировать.</textarea>
<textarea readonly>Это текстовое поле только для чтения, вы не можете его изменить.</textarea>
</body>
</html>

В данном примере селектор textarea устанавливает стиль для всех элементов <textarea>, а селектор textarea[readonly] для элементов <textarea>, к которым добавлен атрибут readonly. Результат примера показан на рис. 1.

Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly

Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для <input> атрибут type по умолчанию равен text, но селектор input[type] будет работать для <input type=»text»> и не будет для <input>, хотя сами элементы отображаются одинаково.

Селектор [attribute=»value»]

Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для <input>, у которого значение type равно checkbox, селектор запишется следующим образом.

input[type="checkbox"] { width: 20px; height: 20px; }

Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.

Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.

В примере 2 показано как установить стиль для элемента <input>, основываясь на его значении.

Пример 2. Изменение поля формы

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
input[type=»number»] {
border: 1px solid red; /* Параметры рамки */
border-radius: 4px; /* Радиус скругления */
width: 3em; /* Ширина */
padding: 5px; /* Поля */
}
</style>
</head>
<body>
<form>
<p>Ваше имя: <input name=»name»></p>
<p>Возраст: <input type=»number» name=»age» value=»18″></p>
<p><input type=»submit» value=»Отправить»></p>
</form>
</body>
</html>

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

Рис. 2. Изменение стиля элемента в зависимости от значения атрибута

Селекторы атрибутов можно применять вместо классов, поскольку [class=»block»] и .block выберут одни и те же элементы.

Селектор [attribute^=»value»]

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

[class^="view"] { color: red; }

При этом будут выделены элементы с классом view, view-block, viewer, но не block-view.

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

Пример 3. Изменение стиля ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
a[href^=»http://»] {
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href=»page/new.html»>Обычная ссылка</a> |
<a href=»http://ya.ru»>Ссылка на ya.ru</a> |
<a href=»http://google.ru»>Ссылка на google.ru</a></p>
</body>
</html>

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

Рис. 3. Изменение стиля ссылок

Селектор [attribute*=»value»]

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

[class*="view"] { color: red; }

При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

Пример 4. Стиль для сайта GitHub

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
a[href*=»github»] { /* Ссылка содержит github */
background: url(/example/image/if_GitHub.png) no-repeat 100% 50%; /* Добавляем фоновый рисунок */
padding-right: 24px; /* Смещаем текст влево */
}
</style>
</head>
<body>
<p><a href=»https://ya.ru»>Яндекс</a> |
<a href=»https://github.com»>GitHub</a></p>
</body>
</html>

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

Рис. 4. Изменение стиля ссылки

Селектор [attribute$=»value»]

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

[class$="view"] { color: red; }

При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 5.

Пример 5. Стиль для разных доменов

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
a[href$=».ru»] { /* Ссылка оканчивается на .ru */
background: url(/example/image/ru.png) no-repeat 0 50%; /* Добавляем фоновый рисунок */
padding-left: 18px; /* Смещаем текст вправо */
}
a[href$=».com»] { /* Ссылка оканчивается на .com */
background: url(/example/image/com.png) no-repeat 0 50%;
padding-left: 18px;
}
</style>
</head>
<body>
<p><a href=»//ya.ru»>Яндекс</a> |
<a href=»//google.com»>Google</a></p>
</body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

Рис. 5. Добавление картинки к ссылкам

Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента <input>, у которого есть атрибут type со значением password и атрибут required, запись будет следующей.

input[type="password"][required] { border: 1px solid red; }

Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.

Последнее изменение: 01.06.2020

Источник

От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе.

Почему именно пользовательские data-атрибуты?

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

Например, у вас на странице показан список ресторанов. До HTML5 для хранения информации о еде в ресторане, а также о расстоянии до него от посетителя вы могли воспользоваться атрибутом class. А что если вам также нужно хранить id ресторана, чтобы знать, в какой конкретный ресторан пользователь собирается пойти?

С подходом на HTML-классах связано несколько проблем:

атрибут class не предназначен для хранения такой информации, его основная задача – позволять разработчику назначать стили на набор элементов;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;

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

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

Теперь давайте изучим основы data-атрибутов и узнаем, как получить их значения в CSS и JS.

Синтаксис HTML

Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:

Salad King

</li>

Теперь эти data-атрибуты можно использовать для поиска и сортировки ресторанов для посетителей. Например, можно отобразить только вегетарианские рестораны в определенном радиусе.

Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчеркивание (_). Заглавных букв в имени быть не должно.

При использовании data-атрибутов необходимо помнить о двух вещах.

Первое, тип хранимых в атрибуте данных должен быть string (строка). Также в data-атрибуте могут храниться любые данные, которые можно перекодировать в строку. Преобразования типов должны выполняться в JS.

Второе, data-атрибуты необходимо использовать только в крайнем случае, если ни один другой HTML-элемент или атрибут не подходит. Например, нельзя хранить класс элемента в атрибуте data-class.

У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.

Data-атрибуты и CSS

Data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов. Также с помощью функции attr() можно показывать пользователям информацию из data-атрибутов (с помощью тултипа, например).

Стилизация элементов

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

li[data—type=‘veg’] {

background: #8BC34A;

}

li[data—type=‘french’] {

background: #3F51B5;

}

Создание тултипов

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

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

Информацию, которую вы хотите показать, можно хранить в атрибуте data-tooltip.

Представить данные пользователю можно с помощью псевдоэлемента ::before.

span::before {

content: attr(data—tooltip);

// Другие стили

}

span:hover::before {

display: inline—block;

}

Получение доступа к data-атрибутам в JS

Существует 3 способа получить доступ к data-атрибутам в JS.

Методы getAttribute и setAttribute

С помощью методов getAttribute() и setAttribute() в JS можно получать и устанавливать значения data-атрибутов.

Метод getAttribute вернет null или пустую строку, если атрибут не существует. Пример использования методов:

var restaurant = document.getElementById(«restaurantId»);

var ratings = restaurant.getAttribute(«data-ratings»);

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

restaurant.setAttribute(«data-owner-name», «someName»);

Свойство dataset

Более простой способ получить доступ к data-атрибутам – с помощью свойства dataset. Это свойство возвращает объект DOMStringMap с одной записью для каждого data-атрибута.

При использовании свойства dataset необходимо помнить о нескольких вещах.

Трансформация пользовательского data-атрибута в ключ DOMStringMap проходит в три этапа:

из имени атрибута удаляется префикс data-;

любой дефис, за которым следует буква нижнего регистра, удаляется из имени, а следующая за ним буква переводится в верхний регистр;

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

Получить доступ к атрибутам можно с помощью имени в верблюжьем регистре, которое хранится в объекте в виде ключа. Например, вот так: element.dataset.keyname.

Другой способ получить доступ к атрибутам – использовать квадратные скобки, вот так: element.dataset[keyname].

Разберем следующий HTML-код:

Salad King

</li>

Пара примеров:

var restaurant = document.getElementById(«restaurantId»);

var ratings = restaurant.dataset.ratings;

restaurant.dataset.ratings = newRating;

var owner = restaurant.dataset[‘ownerName’];

restaurant.dataset[‘ownerName’] = ‘newOwner’;

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

С помощью jQuery

Также получить доступ к data-атрибутам можно через jQuery-метод data(). До jQuery 1,6 для доступа к data-атрибутам необходимо было писать следующий код:

var restaurant = $(«#restaurantId»);

var owner = restaurant.data(«owner-name»);

restaurant.data(«owner-name», «newName»);

С версии 1,6 jQuery перешел на верблюжий регистр в data-атрибутах. Теперь код сверху можно переписать следующим образом:

var restaurant = $(«#restaurantId»);

var owner = restaurant.data(«ownerName»);

restaurant.data(«ownerName», «newName»);

Также вы должны знать, что jQuery самостоятельно пытается конвертировать строку, полученную из data-атрибута в подходящий тип. Например, числовой, Булев, объект, массив или null.

var restaurant = $(«#restaurantId»);

var identifier = restaurant.data(«identifier»);

console.log(typeof identifier);

// number

Если необходимо получить значение атрибута в виде строки, и чтобы jQuery не пробовал его конвертировать в другой тип, воспользуйтесь jQuery-методом attr().

jQuery извлекает значение data-атрибутов только один раз при первом доступе. Потом data-атрибуты не доступны и не изменяются. Все вносимые в атрибуты изменения применяются только в рамках jQuery и доступны только в нем.

Например, вам нужно что-то изменить в data-атрибутах следующего элемента списка:

Salad King

</li>

Для изменения атрибута data-distance можно использовать код ниже:

var distance = $(«#salad»).data(«distance»);

console.log(distance);

// «2miles»

$(«#salad»).data(«distance»,«1.5miles»);

console.log(distance);

// «1.5miles»

document.getElementById(«salad»).dataset.distance;

// «2miles»

Как видите, при получении значения атрибута data-distance с помощью обычного JS (не jQuery) отображается старое значение.

Заключение

В этом уроке я рассказал все, что нужно знать о HTML5 data-атрибутах. Помимо создания тултипов и стилизации элементов с помощью селекторов атрибутов data-атрибуты можно использовать для хранения и отображения пользователям других данных. Например, уведомления о непрочитанных сообщениях и т.д.

Автор: Gajendar Singh

Источник: //www.sitepoint.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.

Использование data атрибутов в HTML и CSS

Data атрибут — это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.

Как добавить data атрибут к HTML тегу

Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.

<button data-categories="pets">Pets</button>

Длина названия data атрибута может быть любой, слова должны разделяться через дефис.

<div data-is-active-color="red"></div>

Пример стилизации элементов с data атрибутом

Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.

// HTML код <div class="large_btn" data-size="large">button</div>


// CSS код

// селектор по названию атрибута

[data-size="large"] {

    font-size: 30px;

    padding: 20px;

}
// селектор по тегу и названию

div [data-size="large"] {

    font-size: 30px;

    padding: 20px;

}
// селектор по классу и названию

large_btn.[data-size="large"] {

    font-size: 30px;

    padding: 20px;

}

Принцип создания подсказок с data атрибутом на CSS

Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.

<span data-tooltip="текст подсказки"></span>


[data-tooltip]::after {

    content: attr(data-tooltip);

}

Использование data атрибутов в JavaScript

В JS существует, как минимум два способа получения data атрибута:

Первый способ, через getAttribute и setAttribute

Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.

element.getAttribute("data-filter")

Метод setAttribute добавляет значение, указанное вторым параметром («pillows») в data атрибут в первом параметре («data-filter»).

element.setAttribute("data-filter", "pillows")

Второй способ, через объект dataset в структуре DOM

Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).

<div data-person></div>


// Получение data атрибута

div.dataset.person
// Добавление значения для data атрибута

div.dataset.person = "Donald"

Работа с data атрибутами в JavaScript — достаточно актуальная тема, с которой вы будете часто встречаться, более основательно познакомиться с data атрибутами и не только, вы сможете в моем видеокурсе по JavaScript.

Итоги

Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:

Создание всплывающих подсказок на чистом CSS
Получать и изменять значения атрибутов

Создано 16.11.2020 10:06:02
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Селекторы атрибута

Назад
Обзор: Building blocks
Далее

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

Необходимые условия:	Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:	Узнать, что такое селекторы атрибута и как их использовать.

Селекторы наличия и значения

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

Селектор	Пример	Описание
`[attr]`	`a[title]`	Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
`[attr=value]`	`a[href="https://example.com"]`	Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
`[attr~=value]`	`p[class~="special"]`	Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
`[attr\|=value]`	`div[lang\|="zh"]`	Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Селекторы вхождения подстроки

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки «box-«, вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

Селектор	Пример	Описание
`[attr^=value]`	`li[class^="box-"]`	Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
`[attr$=value]`	`li[class$="-box"]`	Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
`[attr*= ]`	`li[class*="box"]`	Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

Следующий пример показывает, как используются эти селекторы:

li[class^="a"] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.
li[class$="a"] выбирает все значения атрибута, которые заканчиваются на a, что соответствует первому и третьему элементу списка.
li[class*="a"] выбирает все значения атрибута, где появляется a, независимо от положения в строке, что соответствует всем элементам нашего списка.

Чувствительность к регистру

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

Следующие шаги

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

Назад
Обзор: Building blocks
Далее

В этом модуле

Источник

Простой селектор атрибута

Атрибут со значением

Значение атрибута начинается с определённого текста

Значение атрибута оканчивается определённым текстом

Значение атрибута содержит указанный текст

Одно из нескольких значений атрибута

Дефис в значении атрибута

Вопросы для проверки

Ответы

Селектор [attribute]

Селектор [attribute=»value»]

Селектор [attribute^=»value»]

Селектор [attribute*=»value»]

Селектор [attribute$=»value»]

Почему именно пользовательские data-атрибуты?

Синтаксис HTML

Data-атрибуты и CSS

Стилизация элементов

Создание тултипов

Получение доступа к data-атрибутам в JS

Методы getAttribute и setAttribute

Свойство dataset

С помощью jQuery

Заключение

Верстка. Быстрый старт

Использование data атрибутов в HTML и CSS

Как добавить data атрибут к HTML тегу

Пример стилизации элементов с data атрибутом

Принцип создания подсказок с data атрибутом на CSS

Использование data атрибутов в JavaScript

Итоги

Селекторы атрибута

Селекторы наличия и значения

Селекторы вхождения подстроки

Чувствительность к регистру

Следующие шаги

В этом модуле

Читайте также: