Атрибуты и стили

При построении страницы браузер берёт информацию об элементах из их атрибутов. Но, кроме того, все элементы страницы являются объектами со своими свойствами, которые также учитываются при отображении элементов. DOM-интерфейс позволяет работать и с атрибутами элементов и с их свойствами.

Свойство attributes

У любого элемента есть свойство attributes, с помощью которого можно получить коллекцию его атрибутов, в виде объекта NamedNodeMap. Каждый атрибут в этой коллекции имеет имя, который совпадает с именем атрибута. Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item. Отсчёт атрибутов в этой коллекции начинается с 0.

Для работы с узлами (получения значения узла, добавление нового узла или удаления существующего) используются следующие методы объекта NamedNodeMap: getNamedItem(), setNamedItem(), removeNamedItem() и hasAttributes()

Методы элемента для работы с его атрибутами

Кроме свойства attributes, которое возвращает атрибуты в виде NameNodeMap, у каждого элемента есть методы getAttribute(), setAttribute(), removeAttribute(), hasAttribute(), которые позволяют работать с его атрибутами более просто.

Эти методы работают именно с HTML-атрибутами как они есть в документе. Фактически, они изменяют код страницы. Поэтому для них справедливо:

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

Связь свойств с атрибутами

В DOM-интерфейсе понятия HTML-атрибутов и DOM-свойств элементов тесно связаны. При создании модели страницы для каждого элемента создаются одноимённые с атрибутами свойства и присваиваются им те же значения. Однако, это справедливо не для всех атрибутов. Например: Для атрибута class соотвествует свойство className, а для атрибута data- - свойство dataset

Для атрибута «булевого» типа (hidden, autofocus, checked, disabled, multiple, readonly, required) создаётся одноимённое свойство также «булевого» типа, то есть со значением true или false. Но в HTML-коде эти атрибуты вообще могут не иметь значений.

Многие элементы HTML имеют только базовый набор атрибутов: id, class, style и title, а также языковые атрибуты lang и dir. Модель DOM обеспечивает доступ к ним с помощью свойств id, className, style, title, lang и dir.

Стили

Вместе с атрибутами здесь необходимо рассмотреть свойства элемента style и cssText, а также метод getComputedStyle объекта window и управление встроенными стилями с помощью свойства document.styleSheets.

attributes

Свойство attributes возвращает коллекцию атрибутов указанного узла, в качестве объекта NamedNodeMap.

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

Синтаксис

node.attributes

Примеры

В качестве примера, рассмотрим элемент р и его атрибуты:

<p id="description" class="text" style="text-align:center; color:#654321" aaa=bbb> Мне нравится JavaScript </p>

<script>
var e = document.getElementById("description");
var attrP = e.attributes;

document.write (e.outerHTML.replace(/</g,'&lt;'));
for (var i=0; i < attrP.length; i++) 
 { document.write('<br>' + attrP[i].name + ' = "' + attrP[i].value + '"');
   if (attrP[i].name == "class") 
     { attrP[i].value = "info"; // новое значение
       document.write('      Новое значение = "' + attrP[i].value + '"');  }
  }
</script>

classList

Свойство classList содержит список (псевдомассив) классов элемента.

Синтаксис

element.classList

Описание, комментарии

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

element.classList.add (class1, class2,...)	Добавляет один или несколько имен классов элемента. Если указанный класс уже существует, не будет добавлен
element.classList.remove (class1, class2,...)	Удаляет один или несколько имен классов из элемента.
element.classList.contains (class)	Проверяет, имеется ли класс (`true`) или нет (`false`)
element.classList.toggle (class)	Добавляет класс, если его нет, или удаляет его, если он уже есть

Совместимость с браузерами


8,0	10,0	3,6	5,1	11,5

Примеры

Кросс-браузерное решение

<style>
.mystyle {width:500px; height:50px; background-color:coral; color:white; font-size:24px; }
.uu span {font-style: italic; color: #ff00ff}
#i, #demo b {color: #330033; font-weight: bold; font.size: 108%;}
</style>

<div id="myDIV" class="uu"> Это div-элемент c id="myDIV" </div><br>

<button onclick="f()">Попробуй classList.<span id='i'>add</span> </button>

<p id="demo"></p>

<script>
var i = document.getElementById("i");
var t = 'add';
var a, p, x = document.getElementById("myDIV");
var demo = document.getElementById("demo");

function f() {
 switch (t) {
  case 'add':
    if ( (a=x.classList) )  {x.classList.add('mystyle');}
    else { x.className = 'mystyle'; a = x.className.split(" ");}  // IE 9,0-
    demo.innerHTML = "<b>add:</b><br>classList: "+a+'<br>length: '+a.length;
    i.innerHTML = "remove"; 
    t = "remove"; break;
  case 'remove':
    if ( (a=x.classList) ) {x.classList.remove("mystyle");}
    else { x.className = x.className.replace(/\bmystyle/g, ""); a = x.className.split(" ");} // IE 9,0-
    demo.innerHTML = "<b>remove:</b><br>classList: "+a+'<br>length: '+a.length;
    i.innerHTML = "contains"; 
    t = "contains"; break;
  case 'contains':
    if ( (a=x.classList) ) { p = x.classList.contains("mystyle"); }
    else {p = /\bmystyle/g.test(x.className); a = x.className.split(" ");}  //IE 9,0-
    demo.innerHTML = "<b>contains:</b><br>classList: "+a+'<br>length: '+a.length+"<br>contains: "+p;
    i.innerHTML = "add"; 
    t = "toggle"; break;
  case 'toggle':
    if ( (a=x.classList) ) { p = x.classList.toggle("uu"); }
    else {p = /\bmystyle/g.test(x.className); a = x.className.split(" ");}  //IE 9,0-
    demo.innerHTML = "<b>toggle:</b><br>classList: "+a+'<br>length: '+a.length+"<br>toggle: "+p;
    i.innerHTML = "add"; 
    t = "add"; break;
   } }
</script>

className

Свойство className устанавливает или возвращает значение аттрибута class

Синтаксис

element.className [ = name ]

class: Задает имя класса элемента. Чтобы применить несколько классов, необхолимо разделить их пробелами.
Например: "test demo"

Возвращаемое значение

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

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

Примеры

Alert ( document.getElementById("main").className );

cssText

Свойство cssText позволяет задать CSS стили массово одной строкой. При этом все содержимое атрибута style перезаписывается.

Синтаксис

element.style.cssText [ = "свойство 1: значение; свойство 2: значение..." ]

Не злоупотребляйте этим свойством. Это ведет к ошибкам - ведь cssText затирает все из атрибута style, это значит, что все ранее установленные через JavaScript стили CSS просто затрутся.

Примеры

Давайте зададим элементу несколько стилей:

Пример 1

//<p id="elem1">Пример 1</p>
var elem = document.getElementById('elem1');
elem.style.cssText = 'color: #654321; font-family: italic; font-size: 20px; font-weight: bold;';

В этом примере у элемента изначально уже будут стили в атрибуте style, но свойство cssText перезапишет его:

Пример 2

//<p id="elem2" style="background: #aaaaaa;">Пример 2</p>
var elem = document.getElementById('elem2');
elem.style.cssText = 'color: #654321; font-family: italic; font-size: 20px; font-weight: bold;';

// HTML код станет выглядеть так:
// <p id="elem" style="color: #654321; font-family: italic; font-size: 20px; font-weight: bold;">

Чтобы предыдущие стили не перезаписывались, можно сделать так:

Пример 3

//<p id="elem3" style="background: #aaaaaa;">Пример 3</p>
var elem = document.getElementById('elem3');
elem.style.cssText += 'color: #654321; font-family: italic; font-size: 20px; font-weight: bold;';

dir

Свойство dir позволяет установить или узнать направления текста в элементе.

Синтаксис

element.dir [ = "ltr" | "rtl" ]
rtl

ltr - направление текста слева направо.
rtl - направление текста справа налево.

Возвращаемое значение

Строка, содержащая тип направления текста.

Пример

<p id='i'>Свойство <b>dir</b> позволяет установить или узнать направления текста в элементе.</p>
<button onclick="f('ltr')"> Слева направо </button> 
 <button onclick="f('rtl')"> Справа налево </button> 
<script>
function f(t) { document.getElementById("i").dir = t; }
</script>

getAttribute()

Метод getAttribute возвращает значение атрибута, указанного в качестве параметра. Если данного атрибута у элемента нет, то данный метод возвращает пустую строку или null.

Синтаксис

element.getAttribute (nameAttr)

Параметры

nameAttr: Имя атрибута

Примеры

<style>
.democlass {color: #654321; }
</style>

<h1 class="democlass"> getAttribute </h1>

<button onclick="myFunction()"> Попробуй </button>

<p id="demo"></p>

<script>
function myFunction() 
 {  document.getElementById("demo").innerHTML = 
     document.getElementsByTagName("H1")[0].getAttribute("class"); }
</script>

getComputedStyle()

Метод getComputedStyle позволяет получить значение любого CSS свойства элемента, даже из CSS файла.

Синтаксис

getComputedStyle (element [, pseudo] )

Параметры

element: Элемент, значения для которого нужно получить
pseudo: Указывается, если нужен стиль псевдо-элемента, например "::before". Пустая строка или отсутствие аргумента означают сам элемент.

Возвращаемое значение

Возвращается коллекция (только для чтения) всех CSS-свойств элемента.

Иногда функция getComputedStyle работает не совсем корректно с шириной и высотой. Поэтому для определения ширины и высоты рекомендуется пользоваться метриками.
Есть еще один нюанс: если ширина задана в % - то после работы getComputedStyle мы увидим ее в px. То есть по сути мы получаем не заданную ширину, а вычисленную.
Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderLeftWidth.

При обращении к сокращенному: padding, margin, border – правильный результат не гарантируется.

Совместимость с браузерами


Да	9,0	Да	Да	Да

В IE8- нет getComputedStyle, но у элементов есть свойство currentStyle, которое возвращает вычисленное значение: уже с учётом CSS-каскада, но не всегда в окончательном формате.

Чтобы код работал и в старых и новых браузерах, обычно пишут кросс-браузерный код, наподобие такого:

function getStyle(element) {
  return window.getComputedStyle ? getComputedStyle(element, "") : element.currentStyle;
}

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

Примеры

var style = window.getComputedStyle ? getComputedStyle(document.body, "") : document.body.currentStyle;
var s='';
for (var p in style) 
  { if (isNaN(p)) 
       s += '<span>'+p + ':</span> <code>' + 
             style[p] + '</code><br>'; 
  }
document.getElementById("elem4").innerHTML = s;

getComputedStyle(document.body):

getNamedItem()

Метод getNamedItem возвращает узел атрибута с указанным именем из объекта NamedNodeMap.

Синтаксис

nodemap.getNamedItem(nodeName)

Параметры

nodeName: Имя узла в NamedNodeMap

Возвращаемое значение

Объект Узел, представляющий узел атрибута с указанным именем.

Совместимость с браузерами


Да	9,0	Да	Да	Да

Примеры

<button onclick="myFunction()"> Попробуй <b>getNamedItem</b> </button>

<p><strong>Note:</strong> В IE 8,0-  этот метод не работает.</p>

<p id="demo"></p>

<script>
function myFunction() {
    var a = document.getElementsByTagName("BUTTON")[0];
    var x = a.attributes.getNamedItem("onclick").value;  
    document.getElementById("demo").innerHTML = 
     'getNamedItem("onclick").value = ' + x;
}
</script>

hasAttribute()

Метод hasAtrribute возвращает true, если указанный атрибут существует у элемента. В противном случае данный метод возвращает false. Данный метод имеет один обязательный параметр - это строка, содержащая имя атрибута, который Вы хотите проверить на существование у элемента.

Синтаксис

element.hasAttribute ( nameAttr )

Параметры

nameAttr: Имя атрибута

Примеры

Alert ( document.getElementById ('main').hasAttribute("class") );

hasAttributes()

Метод hasAttributes возвращает true если указанный узел имеет атрибуты. В противном случае данный метод возвращает false. Если указанный узел не является элементом, то данный метод всегда возвращает значение false. Метод hasAttributes не имеет параметров.

Синтаксис

node.hasAttributes ();

Примеры

Определить имеет ли элемент с id="main" атрибуты:

 Alert ( document.getElementById("main").hasAttributes() );

hidden

Свойство hidden позволяет получить или изменить атрибут hidden

Синтаксис

element.hidden [ = true|false ]

Совместимость с браузерами


Да	11,0	Да	Да	Да

Технически, атрибут hidden работает так же, как style="display:none". Но его проще поставить через JavaScript (меньше букв), и могут быть преимущества для скринридеров и прочих нестандартных браузеров.

Пример

<p> <span id=test> тест атрибута <b>hidden</b> </span>   </p>
<p id="demo"></p>
<button onclick="f(true)"> hidden = true </button> 
 <button onclick="f(false)"> hidden = false </button>
 
<script>
var a = document.getElementById('test');
var x = document.getElementById('demo');
function f(n) {a.hidden = n;
x.innerHTML = 'hidden = ' + a.hidden + '<br>' + 
 a.outerHTML.replace(/</g,'&lt;');}
f(false);
</script>

id

Свойство id позволяет установить или узнать идентификатор элемента (значение атрибута id элемента).

Синтаксис

element.id [ = str_id ]

str_id - идентификатор элемента.

Возвращаемое значение

Строка, содержащая идентификатор элемента

item()

Метод item возвращает узел атрибута по указанному индексу в NamedNodeMap.

Синтаксис

nodemap.item(index)
nodemap[index]

Параметры

index: Индекс узла в NamedNodeMap

Примеры

<button onclick="myFunction()" class="Example"> Попробуй <b>item</b> </button>

<p id="demo"></p>

<script>
function myFunction() {
    var a = document.getElementsByTagName("BUTTON")[0];
    var x = a.attributes[0].name;
    var y = a.attributes.item(1).name;   
    document.getElementById("demo").innerHTML = x+', '+y;
}
</script>

length

Свойство length возвращает количество узлов атрибутов в NamedNodeMap.

Синтаксис

nodemap.length

Примеры

<button onclick="myFunction()" class="Example"> Попробуй <b>length</b> </button>

<p id="demo"></p>

<script>
function myFunction() 
 { var a = document.getElementsByTagName("BUTTON")[0];
   document.getElementById("demo").innerHTML = 
     'button.attributes.length = ' + a.attributes.length; }
</script>

removeAttribute()

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

Синтаксис

element.removeAttribute ( nameAttr )

Параметры

nameAttr: Имя атрибута

Примеры

<style>
.democlass {color: green; font-style: italic; background: #dddddd; font-size: 48px;}
</style>

<h1 class="democlass"> removeAttribute </h1>

<button onclick="myFunction(0)"> Удалить атрибут class </button> 
 <button onclick="myFunction(1)"> Добавить атрибут class </button> 

<script>
function myFunction(n) 
 { x =  document.getElementsByTagName("H1")[0];
  if (n == 0) x.removeAttribute("class");
  else x.setAttribute("class", "democlass"); }
</script>

removeNamedItem()

Метод removeNamedItem удаляет узел с указанным именем в объекте NamedNodeMap.

Синтаксис

nodemap.removeNamedItem(nodeName)

Параметры

nodeName: Имя узла в NamedNodeMap вы хотите удалить

Возвращаемое значение

Объект Узел, представляющий removed узел атрибута

В Internet Explorer 8 и выше, метод возвращает атрибут , как и должно быть, но это не снимает атрибут.

setAttribute()

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

Синтаксис

element.setAttribute ( nameAttr, value )

Параметры

nameAttr: Имя атрибута
value: Значение атрибута

Примеры

<style>
.democlass {color: red; }
</style>

<h1> setAttribute </h1>

<button onclick="myFunction()"> Попробуй </button>

<script>
function myFunction() 
  { var x = document.getElementsByTagName("H1")[0];
    x.setAttribute("class", "democlass");
    x.setAttribute("style", "font-size:72px"); }
</script>

setNamedItem()

Метод setNamedItem добавляет указанный узел к NamedNodeMap.

Синтаксис

nodemap.setNamedItem ( node )

Параметры

node: Узел вы хотите добавить / заменить в NamedNodeMap.

Примеры

<style>
.democlass {color: red; }
</style>

<h1> setNamedItem </h1>

<button onclick="myFunction()"> Попробуй <b>setNamedItem()</b> </button>

<script>
function myFunction() {
  var h = document.getElementsByTagName("H1")[0];
  var typ = document.createAttribute("class");
  typ.value = "democlass";
  h.attributes.setNamedItem(typ); }
</script>

style

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

С его помощью можно изменять большинство CSS-свойств, например element.style.width="100px" работает так, как будто у элемента в атрибуте прописано style="width:100px".

Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:

background-color      => element.style.backgroundColor
z-index               => element.style.zIndex
border-left-width     => element.style.borderLeftWidth
-moz-border-radius    => element.style.MozBorderRadius
-webkit-border-radius => element.style.WebkitBorderRadius

В старом стандарте JavaScript слово "float" было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется не element.style.float, а element.style.cssFloat.
Чтобы сбросить поставленный стиль, присваивают в style пустую строку: element.style.width="".

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

Например, для того, чтобы спрятать элемент, можно присвоить: element.style.display = "none".

А вот чтобы показать его обратно – не обязательно явно указывать другой display, наподобие element.style.display = "block". Можно просто снять поставленный стиль: element.style.display = "".
```
// если запустить этот код, то <body> на 1 секунду поменяет фон"
document.body.style.backgroundColor = "red";

setTimeout(function() { document.body.style.backgroundColor  = ""; }, 1000);
```
Стиль в style находится в формате браузера, а не в том, в котором его присвоили, Например:
```
<button onclick="myFunction()"> Попробуй </button>
<p id="demo"></p>

<script>
function myFunction() {
 document.body.style.margin = '50px';
 var s = "marginTop = " + document.body.style.marginTop; // 50px!

 document.body.style.color = '#abc';
 s += "<br>color = " + document.body.style.color;       // rgb(170, 187, 204)
  
 document.getElementById('demo').innerHTML = s;
}
</script>
```
Обратите внимание на то, как браузер «распаковал» свойство style.margin, предоставив для чтения style.marginTop. То же самое произойдет и для border, background и т.д.
Свойство style является специальным объектом, ему нельзя присваивать строку.

Запись element.style="color:blue" работать не будет.

Можно попробовать использовать атрибут: element.setAttribute("style", ...), но самым правильным и, главное, кросс-браузерным (с учётом старых IE) решением такой задачи будет использование свойства style.cssText

Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.

Вот так style уже ничего не увидит:

<style>div { color: red; margin: 5px } </style>
<div id='i'>  Красный текст </div>
<script>
var x = document.getElementById('i');
document.write(x.style.color + '<br>' +  //в большинстве браузеров
               x.style.marginTop);       //  ничего не выведет
</script>

Дополнительная информация о свойстве style находится здесь.

Атрибуты и стили

Свойство attributes

Методы элемента для работы с его атрибутами

Связь свойств с атрибутами

Стили

attributes

Синтаксис

Комментарии

Примеры

classList

Синтаксис

Описание, комментарии

Совместимость с браузерами

Примеры

className

Синтаксис

Возвращаемое значение

Примеры

cssText

Синтаксис

Комментарии

Примеры

dir

Синтаксис

Возвращаемое значение

Пример

getAttribute()

Синтаксис

Параметры

Примеры

getComputedStyle()

Синтаксис

Параметры

Возвращаемое значение

Комментарии

Совместимость с браузерами

Примеры

getNamedItem()

Синтаксис

Параметры

Возвращаемое значение

Совместимость с браузерами

Примеры

hasAttribute()

Синтаксис

Параметры

Примеры

hasAttributes()

Синтаксис

Примеры

hidden

Синтаксис

Совместимость с браузерами

Комментарии

Пример

id

Синтаксис

Возвращаемое значение

item()

Синтаксис

Параметры

Примеры

length

Синтаксис

Примеры

removeAttribute()

Синтаксис

Параметры

Примеры

removeNamedItem()

Синтаксис

Параметры

Возвращаемое значение

setAttribute()

Синтаксис

Параметры

Примеры

setNamedItem()

Синтаксис

Параметры