Работа со стилями элемента

Встреча № 8

Атрибуты и DOM-свойства

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как <body id="page">, то у объекта будет свойство body.id = "page".

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Атрибуты HTML

HTML-элементы состоят из имени тега и множества пар имя/значение, известных как атрибуты. Например, элемент <a> </a>, в качестве адреса назначения ссылки использует значение атрибута href.

Значения атрибутов HTML-элементов доступны в виде свойств объектов HTMLElement, представляющих эти элементы. Кроме того, модель DOM определяет механизмы получения и изменения значений нестандартных HTML-атрибутов.

HTML-атрибуты как свойства объектов Element

Объект HTMLElement определяет свойства для поддержки универсальных HTTP-атрибутов, таких как id, title, lang и dir, и даже обработчики событий, такие как onclick.

Например, узнать URL-адрес изображения можно, обратившись к свойству src объекта HTMLElement, представляющего элемент

var image = document.getElementById("myimage");

var imgurl = image.src; // Ат­ри­бут src оп­ре­де­ля­ет URL-ад­рес изо­бра­же­ния

Имена атрибутов в разметке HTML не чувствительны к регистру, в отличие от языкF JavaScript. Чтобы преобразовать имя атрибута в имя свойства в JavaScript, его нужно записать символами в нижнем регистре. Однако, если имя атрибута состоит из более чем одного слова, первый символ каждого слова, кроме первого, записывается в верхнем регистре, например: defaultChecked и tabIndex.

Имена некоторых HTML-атрибутов совпадают с зарезервированными словами языка JavaScript. Имена свойств, соответствующих таким атрибутам, начинаются с приставки «html». Например, HTML-атрибуту for в языке JavaScript соответствует свойство с именем htmlFor. Очень важный HTML-атрибут class, имя которого совпадает с зарезервированным в языке JavaScript, является исключением из этого правила: в программном коде на языке JavaScript ему соответствует свойство className.

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

Еще один способ работы с атрибутами

Доступ к атрибутам осуществляется при помощи стандартных методов:

· elem.hasAttribute(name) – проверяет наличие атрибута

· elem.getAttribute(name) – получает значение атрибута

· elem.setAttribute(name, value) – устанавливает атрибут

· elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Нестандартные атрибуты

У каждого элемента есть некоторый набор стандартных свойств, например для <a> это будут href, name, а для <img> это будут src, alt. Точный набор свойств описан в стандарте.

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

<div id="elem" data-about="Elephant" data-user-location="street"> По улице прошёлся слон. Весьма красив и толст был он. </div>

<script>

alert(elem.getAttribute('data-about')); // Elephant

alert(elem.getAttribute('data-user-location')); // street

</script>

Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных. При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset:

<div id="elem" data-about="Elephant" data-user-location="street"> По улице прошёлся слон. Весьма красив и толст был он. </div>

<script>

alert(elem.dataset.about); // Elephant

alert(elem.dataset.userLocation); // street

</script>

Обратим внимание – название data-user-location трансформировалось в dataset.userLocation. Дефис превращается в большую букву.

Классы в виде объекта: classList

Атрибут class – уникален. Ему соответствует целых два свойства!

Работать с классами как со строкой неудобно. Поэтому, кроме className, в современных браузерах есть свойство classList.

Свойство classList – это объект для работы с классами.

Методы classList:

· elem.classList.contains("action") – возвращает true/false, в зависимости от того, есть ли у элемента класс action.

· elem.classList.add/remove("action ") – добавляет/удаляет класс action

· elem.classList.toggle("action ") – если класса action нет, добавляет его, если есть – удаляет.

Можно перебрать классы через for, так как classList – это псевдо-массив, например:

<body class="main page">

<script>

var classList = document.body.classList;

classList.remove('page'); // удалить класс

classList.add('post'); // добавить класс

for (var i = 0; i < classList.length; i++) { // перечислить классы

alert(classList[i]); // main, затем post

}

alert(document.body.className); // main post

</script>

</body>

Работа со стилями элемента

Самый простой способ управления стилями CSS – это манипулирование атрибутом style отдельных элементов документа. Атрибуту style соответствует одноименное свойство, и им можно манипулировать в сценариях на языке JS. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style. Например, чтобы вывести содержимое элемента elem крупным, жирным шрифтом синего цвета, можно выполнить операции для записи значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:

elem.style.fontSize = "24pt";

elem.style.fontWeight = "bold";

elem.style.color = "blue";

При работе со свойствами стиля не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать: position: absolute; background-color: #ffffff; Чтобы сделать то же самое для элемента elem в JavaScript, необходимо заключить все значения в кавычки:

e.style.position = "absolute";

e.style.backgroundColor = "#ffffff";

Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JS. А также помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство left вот так:

e.style.left = 300; // Не­пра­виль­но: это чис­ло, а не стро­ка

e.style.left = "300"; // Не­пра­виль­но: от­сут­ст­ву­ют еди­ни­цы из­ме­ре­ния

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

e.style.left = "300px";

Сброс стиля в style

Для того, чтобы сбросить стиль, установленный в атрибуте style, присваивают объекту style пустую строку:

elem.style.width="".

При сбросе свойства style стиль будет взят из CSS.

Например, для того, чтобы спрятать элемент, можно присвоить: elem.style.display = "none". А вот чтобы показать его обратно – не обязательно указывать другой display, наподобие elem.style.display = "block". Можно просто снять поставленный стиль: elem.style.display = "".


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: