Изменение CSS свойства с помощью JavaScript
Часто бывает необходимо изменить css свойсва элемента динамически, используя javascript. Для этого используеться следующая конструкция:document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;
В таблице приведены CSS Property’s и соответствующие им JavaScript Reference’s.
CSS Property
JavaScript Reference
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
источник
Изменение внешнего вида checkbox & radio button
Бывают случаи когда необходимо изменить внешний вид элементов формы checkbox & radio button. Недавно нашел решение с использованием javascript.
Сначала качаем скрипты, для коректной работы необходимы screensmall.css, mootools.js и moocheck.js. Из файла стилей, при более близком расмотрении, нам необходимо всего несколько строчек:
.checked{background-color:#222;background-image:url(chk_on.png)}
.unchecked{background-color:#1c1c1c;background-image:url(chk_off.png)}
.selected{background-color:#222;background-image:url(rdo_on.png)}
.unselected{background-color:#1c1c1c;background-image:url(rdo_off.png)}
Следущий шаг это изображения, на которые мы собственно и будем заменять checkbox & […]
