Добавляем...


Доступ к внутристрочным спецификациям стилей
Главным средством разработчиков для изменения значений CSS в JavaScript является свойство style, соответствующее внутристрочным спецификациям таблицы стилей соответствующего элемента HTML. Например, имея абзац типа

<p id="myParagraph">3To проверка</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>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика