Работа с CSS-свойствами

Дата добавления: 2014-11-28; просмотров: 623; Нарушение авторских прав

С помощью свойства style можно изменять большинство CSS-свойств, например:

element.style.color=”red”

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

background-color => backgroundColor

border-left-width => borderLeftWidth

Для удаления CSS-свойства необходимо присвоить ему пустое значение.

Существует свойство style.cssText, которое позволяет задать весь перечень css-свойств элемента через точку с запятой, аналогично тому, как это делается при описании свойств в css при помощи селекторов:

element.style.cssText="color: red !important; background-color: yellow;”

При установке style.cssText все существующие свойства style перезаписываются, поэтому рекомендуется работать с конкретными значениями css-свойств, а не с cssText.

Пример реализации выбора различных внешних видов таблицы:

<html>

<head>

.mytable {text-align: center; font-family: Verdana; color: #D02090; background: #00FFFF; font-weight: bold; font-size: 120%}

</style>

function setStyle(form) {

table1 = document.getElementById('mytable');

switch (form.set_style.value) {

case "1": {

table1.style.cssText=""; //Сброс css-свойств

table1.className="mytable" //Установка класса

}

; break;

case "2": {

table1.className="" //Сброс класса

table1.style.cssText=""; //Сброс css-свойств

table1.style.cssText="color: red; background-color: yellow;" //Установка перечня css-атрибутов

table1.style.width="60%" //Установка css-атрибута

}

; break;

case "3": {

table1.setAttribute("border", "0") //установка атрибута элемента table

}

; break;

case "4": {

table1.setAttribute("border", "1") //установка атрибута элемента table

}

; break;

}

</script>

</head>

<body>

Таблица:

<tr>

<th>Столбец1</th>

<th>Столбец2</th>

<th>Столбец3</th>

</tr>

<tr>

<td>Столбец1</td>

<td>Столбец2</td>

<td>Столбец3</td>

</tr>

<table>

<br>

Стиль таблицы:

<form>

<option value="1">Мой стиль

<option value="2">Цветной

<option value="3">Без сетки

<option value="4">С сеткой

</form>

</body>

</html>

<== предыдущая лекция	\|	следующая лекция ==>
Добавление и удаление элементов DOM	\|	МАССИВЫ