4.4.2.Работа с css-свойствами
С помощью свойства 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>
<style type="text/css">
.mytable {text-align: center; font-family: Verdana; color: #D02090; background: #00FFFF; font-weight: bold; font-size: 120%}
</style>
<script>
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>
Таблица:
<table id="mytable" border="1">
<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>
<select name="set_style" size="1" onChange="setStyle(this.form)">
<option value="0">
<option value="1">Мой стиль
<option value="2">Цветной
<option value="3">Без сетки
<option value="4">С сеткой
</form>
</body>
</html>
4.5.Задание на лабораторную работу
На страницу с перечнем категорий добавить форму для удаления и добавления категорий. Предусмотреть поля для ввода наименования категории и имени файла, который будет открываться при выборе категории.
На страницы с перечнем объектов добавить форму для удаления и добавления объектов. Предусмотреть поля для ввода наименования объекта, имени файла, который будет открываться при выборе объекта, а также имени файла с изображением пиктограммы объекта.
Примечание: при реализации для добавления категорий использовать список, для добавления объектов – таблицу, или наоборот.
На страницу с перечнем категорий добавить форму для выбора «темы» сайта. Выбор темы должен сопровождаться изменением дизайна отображения меню категорий, меню объектов. Необходимо использовать изменение классов элементов, изменение css-свойств, изменение атрибутов.
http://www.web-lesson.ru/site-creation/html/38-osnovy-css-i-html-blochnaya-verstka.html
http://dunaevv1.narod.ru/inclhtml.htm
http://dunaevv1.narod.ru/db0.htm
http://forum.codeby.net/topic5887.html