JavaScript - DOM: управление атрибутом style

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

Атрибут style предназначен для задания элементу определённых CSS стилей непосредственно в коде HTML.

Например:

<!--Элементу p с помощью атрибута style задали CSS свойства:
text-align:center и color:red-->
<p style="text-align:center;color:red;"></p>

Значения атрибута style можно представить себе как список, каждый элемент которого состоит из свойства CSS и его значения. Для разделения элементов списка между собой используется знак "точка с запятой" (;).

JavaScript - атрибут style

Работать с этим списком с помощью методов getAttribute(), setAttribute() и removeAttribute() очень затруднительно, т.к. они не позволяют получить или установить значения конкретному CSS свойству.

Поэтому для работы с атрибутом style предназначено свойство style, которое есть почти у каждого элемента (узла) в дереве. В качестве результата свойство style возвращает не строку содержащие все CSS свойства, а объект CSSStyleDeclaration, который Вы можете использовать для управления состоянием значения атрибута style.

JavaScript - работа с атрибутом style

//получить значение свойства CSS (propertyCSS)
element.style.propertyCSS
//установить свойству CSS (propertyCSS) значение value
element.style.propertyCSS = value 
//удалить значение свойства CSS (propertyCSS)
element.style.propertyCSS = ""
//получить количество элементов, содержащихся в объекте style
element.style.length
//получить CSS свойство, хранящееся в 1 элементе списка style
//отсчёт элементов в CSSStyleDeclaration начинается с 0 
element.style[0]
//получить значение свойства color
element.style["color"]
Название свойств объекта style (CSSStyleDeclaration) обычно совпадают с названиями свойств CSS.

Например, установить элементу с id="introtext" красный цвет текста с помощью атрибута style:

<p id="introtext"></p>
<script>
//свойство color объекта style == свойству CSS color
document.getElementById("introtext").style.color = "red";
</script>

Исключение составляют только те свойства CSS, которые состоят из нескольких слов, разделённых дефисом (например: background-color). В этом дефис убирается, а буква после него заменяется на большую (например: background-color => backgroundColor).

Например, изменить значение свойства background-color, только у тех элементов р в документе у которых её значение равно yellow:

var elementsP = document.getElementsByTagName("P");
for (var i=0; i<elementsP.length; i++) { 
  if (elementsP[i].style.backgroundColor=="yellow")
    elementsP[i].style.backgroundColor = "green";
}

Например, вывести в консоль все свойства CSS атрибута style у элемента, имеющего id="myID":

//получить свойство style элемента с id="myID"
var myID = document.getElementById("myID").style;
//перебрать все свойства CSS 
for(var i=0; i<myID.length; i++) {
  //вывести в консоль название свойства CSS и его значение
  console.log(myID[i] + " = " + myID[myID[i]]);
}

JavaScript - пример работы с атрибутом style

Для получения или установления атрибута style целиком, т.е. в виде строки, используется свойство cssText.

Например, установить значение "font-size:40px;color:blue;" атрибуту style элемента, имеющего id="intro":

//получить элемент, именющий id="intro"
var elementIntro = document.getElementById("intro");
//установить значение "font-size:40px;color:blue;" атрибуту style
elementIntro.style.cssText = "font-size:40px; color:blue;";
  1. Например, выровнять с помощью атрибута style текст во всех элементах p по правому краю.
  2. Вывести в консоль все свойства элемента с id="intro".


   JavaScript и jQuery 0    1921 0

Комментарии (0)

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