Главным средством разработчиков для изменения значений CSS в JavaScript является свойство style, соответствующее внутристрочным спецификациям таблицы стилей соответствующего элемента HTML. Например, имея абзац типа
<p id="myParagraph">Этo проверка</p>
можно добавить в него макрокоманду стиля:
<p id="myParagraph" style="color: green;">Это проверка</p>
Чтобы выполнить соответствующие действия с помощью интерфейса DOM JavaScript, следует использовать сценарий следующего вида:
theElement = document.getElementById("myParagraph");
theElement.style.color = "green";
Как и в случае (X)HTML, главной заботой является вопрос соответствия имен свойств CSS и имен свойств DOM. В случае CSS имена свойств часто пишутся через дефис, например
background-color, что в JavaScript превращается в
background-Color.
Вообще говоря, записанные через дефис свойства CSS изображаются в DOM одним словом с использованием "криволинейной" записи, когда начальные буквы слов (кроме первого) являются прописными. Это правило соблюдается для всех свойств CSS, за исключением float, которое превращается в cssFloat, поскольку "float" является зарезервированным словом JavaScript.
Список часто используемых свойств CSS1 и CSS2 с их соответствиями в DOM приведен в таблице.
| Свойство CSS |
Свойство DOM уровня 2 |
| background |
background |
| background-attachment |
backgroundAttachment |
| background-color |
backgroundColor |
| background-image |
backgroundlmage |
| background-position |
backgroundPosition |
| background-repeat |
backgroundRepeat |
| border |
border |
| border-color |
borderColor |
| border-style |
borderStyle |
| border-top |
borderTop |
| border-right |
borderRight |
| border-left |
borderLeft |
| border-bottom |
borderBottom |
| border-top-color |
borderTopColor |
| border-right-color |
borderRightColor |
| border-bottom-color |
borderBottomColor |
| border-left-color |
borderLeftColor |
| border-top-style |
borderTopStуle |
| border-right-style |
borderRightStyle |
| border-bottom-style |
borderBottomStyle |
| border-left-style |
borderLeftStyle |
| border-top-width |
borderTopWidth |
| border-right-width |
borderRightWidth |
| border-bottom-width |
borderBottomWidth |
| border-left-width |
borderLeftwidth |
| border-width |
borderWidth |
| clear |
clear |
| clip |
clip |
| color |
color |
| display |
display |
| float |
cssFloat |
| font |
font |
| font-family |
fontFamily |
| font-size |
fontSize |
| font-style |
fontStyle |
| font-variant |
fontVariant |
| font-weight |
fontWeight |
| height |
height |
| left |
left |
| letter-spacing |
letterSpacing |
| line-height |
lineHeight |
| list-style |
listStyle |
| list-style-image |
liststylelmage |
| list-style-position |
listStylePosition |
| list-style-type |
listStyleType |
| margin |
margin |
| margin-top |
marginTop |
| margin-right |
marginRight |
| margin-bottom |
marginBottom |
| margin-left |
marginLeft |
| overflow |
overflow |
| padding |
padding |
| padding-top |
paddingTop |
| padding-right |
paddingRight |
| padding-bottom |
paddingBottom |
| padding-left |
paddingLeft |
| position |
position |
| text-align |
textAlign |
| text-decoration |
textDecoration |
| text-indent |
textlndent |
| text-transform |
textTransform |
В следующем примере демонстрируеться возможности установки наиболее часто используемых свойств CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Правила CSS в сценарии </title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body>
<div id="test"> Правила CSS в действии</div>
<hr />
<script type="text/javascript">
<!--
theElement = document.getElementById("test");
//-->
</script>
<form id="cssForm" name="cssForm" action="#" method="get">
<strong>Выравнивание:</strong>
<select
onchange="theElement.style.textAlign=
this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
<option>justify</option>
</select>
<br /><br />
<strong>Шрифт:</strong>
<select
onchange="theElement.style.fontFamily=
this.options[this.selectedIndex].text;">
<option>sans-serif</option>
<option selected="selected">serif</option>
<option>cursive</option>
<option>fantasy</option>
<option>monospace</option>
</select>
<input type="text" id="font" name="font" size="10" value="Impact" />
<input type="button" value="установить"
onclick="theElement.style.fontFamily=
document.cssForm.font.value;" />
<br /><br />
<strong>Стиль:</strong>
<select
onchange="theElement.style.fontStyle=this.options[this.selectedIndex].text;">
<option>normal</option>
<option>italic</option>
<option>oblique</option>
</select>
<strong>Плотность:</strong>
<select onchange="theElement.style.fontWeight
=this.options[this.selectedIndex].text;">
<option>normal</option>
<option>bolder</option>
<option>lighter</option>
</select>
<strong>Вариант:</strong>
<select
onchange="theElement.style.fontVariant
=this.options[this.selectedIndex].text;">
<option>normal</option>
<option>small-caps</option>
</select>
<br /><br />
<strong>Декодирование:</strong>
<select
onchange="theElement.style.textDecoration=
this.options[this.selectedIndex].text;">
<option>none</option>
<option>overline</option>
<option>underline</option>
<option>line-through</option>
<option>blink</option>
</select>
<br /><br />
<strong>Размер Шрифта:</strong>
<select
onchange="theElement.style.fontSize=this.options[this.selectedIndex].text;">
<option>xx-small</option>
<option>x-small</option>
<option selected="selected">small</option>
<option>medium</option>
<option>large</option>
<option>x-large</option>
<option>xx-large</option>
</select>
<input type="text" id="size" name="size" size="3" maxlength="3" value="36pt" />
<input type="button" value="установить"
onclick="theElement.style.fontSize=document.cssForm.size.value;" />
<br /><br />
<strong>Цвет:</strong>
<input type="text" id="fgColor" name="fgColor" size="8" value="yellow" />
<input type="button" value="установить"
onclick="theElement.style.color=document.cssForm.fgColor.value;" />
<br /><br />
<strong>Цвет фона:</strong>
<input type="text" id="bgColor" name="color" size="8" value="red" />
<input type="button" value="установить" onclick=
"theElement.style.backgroundColor=document.cssForm.bgColor.value;" />
<br /><br />
<strong>Границы:</strong>
<select
onchange="theElement.style.borderStyle=this.options[this.selectedIndex].text;">
<option>none</option>
<option>dotted</option>
<option>dashed</option>
<option>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inустановить</option>
<option>outустановить</option>
</select>
<br /><br />
<strong>Высота:</strong>
<input type="text" id="height" name="height" value="100px" size="3" />
<strong>Ширина:</strong>
<input type="text" id="width" name="width" value="100px" size="3" />
<input type="button" value="установить" onclick="theElement.style.height =
document.cssForm.height.value; theElement.style.width =
document.cssForm.width.value;" />
<br /><br />
<strong>Сверху:</strong>
<input type="text" id="top" name="top" value="100px" size="3" />
<strong>Слева:</strong>
<input type="text" id="left" name="left" value="100px" size="3" />
<input type="button" value="установить"
onclick="theElement.style.position='absolute';theElement.style.top
= document.cssForm.top.value; theElement.style.left =
document.cssForm.left.value;" />
<br /><br />
<strong>Видимость:</strong>
<input type="button" value="показать" onclick="theElement.style.visibility='visible';" />
<input type="button" value="скрыть" onclick="theElement.style.visibility='hidden';" />
</form>
<hr />
</body>
</html>