Изменение CSS свойств через JavaScript

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009
Таблица соответствия CSS свойств с их описанием в JavaScript

Код: Выделить всё

       CSS свойство   JavaScript описание

background   background
background-attachment   backgroundAttachment
background-color   backgroundColor
background-image   backgroundImage
background-position   backgroundPosition
background-repeat   backgroundRepeat
border   border
border-bottom   borderBottom
border-bottom-color   borderBottomColor
border-bottom-style   borderBottomStyle
border-bottom-width   borderBottomWidth
border-color   borderColor
border-left   borderLeft
border-left-color   borderLeftColor
border-left-style   borderLeftStyle
border-left-width   borderLeftWidth
border-right   borderRight
border-right-color   borderRightColor
border-right-style   borderRightStyle
border-right-width   borderRightWidth
border-style   borderStyle
border-top   borderTop
border-top-color   borderTopColor
border-top-style   borderTopStyle
border-top-width   borderTopWidth
border-width   borderWidth
clear   clear
clip   clip
color   color
cursor   cursor
display   display
filter   filter
font   font
font-family   fontFamily
font-size   fontSize
font-variant   fontVariant
font-weight   fontWeight
height   height
left   left
letter-spacing   letterSpacing
line-height   lineHeight
list-style   listStyle
list-style-image   listStyleImage
list-style-position   listStylePosition
list-style-type   listStyleType
margin   margin
margin-bottom   marginBottom
margin-left   marginLeft
margin-right   marginRight
margin-top   marginTop
overflow   overflow
padding   padding
padding-bottom   paddingBottom
padding-left   paddingLeft
padding-right   paddingRight
padding-top   paddingTop
page-break-after   pageBreakAfter
page-break-before   pageBreakBefore
position   position
float   styleFloat
text-align   textAlign
text-decoration   textDecoration
text-decoration: blink   textDecorationBlink
text-decoration: line-through   textDecorationLineThrough
text-decoration: none   textDecorationNone
text-decoration: overline   textDecorationOverline
text-decoration: underline   textDecorationUnderline
text-indent   textIndent
text-transform   textTransform
top   top
vertical-align   verticalAlign
visibility   visibility
width   width
z-index   zIndex


Пара слов об использовании:
    Internet Explorer
    document.all.div_id.style.JS_property_reference = "new_CSS_property_value";
    Older Netscape's (4.7 and earlier)
    document.div_id.JS_property_reference = "new_CSS_property_value";
    Netscape 6.0+ and Opera (and other Mozilla)
    document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";
    Пример
    document.getElementById(div_id).style.fontSize = "10px";

Для управления классами элемента из JavaScript можно использовать:
    изменение класса
    document.getElementById("MyElement").className = " MyClass";
    добавление класса
    document.getElementById("MyElement").className += " MyClass";
    удаление одного из классов элемента
    document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
    аналогичные действия через jQuery
    $j('#MyElement').toggleClass('MyClass');
    $j('#MyElement').addClass('MyClass');
    $j('#MyElement').removeClass('MyClass');

Использованные источники:
http://codepunk.hardwar.org.uk/css2js.htm
http://stackoverflow.com/questions/1959 ... javascript

Вернуться в «JavaScript»