JavaScript скрипты


Изменение CSS свойства с помощью JavaScript

Размещена 26 августа, 2008 года


Часто бывает необходимо изменить css свойсва элемента динамически, используя javascript. Можно менять свойство class, если у вас описан стиль в css и надо поменять сразу несколько свойств. Например так:

document.getElementById(div_id).className='class1';
Но если вам нужно изменить одно или несколько свойств, оставив остальные неизменными, или если у вас не описан отдельный класс для этого, можно использовать следующую конструкцию:
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
SAPE все усложнил?

MainLink - простая и прибыльная продажа ссылок!

Последние поступления:

Размещена 17 января 2013 года

xxx: говорят его из универа кикнули
yyy: АХАХААХ
yyy: КИКНУЛИ
yyy: да его банить надо
yyy: по Мас-адресу
yyy: за годовой афк

Размещена 17 января 2013 года

xxx: Решил пол сменить, вот и гвоздодер вчера уже купил.
yyy: Для анестезии? ))
xxx: Идиот!!! Пол в доме.

Размещена 17 января 2013 года

Антон: какие планы на выходные?
Олеся: планов много. все полезные.
Олеся: купила себе развлекушечку одну.
500мл адреналина, невероятных ощущений и ярких эмоций.
Антон: просроченный кефир?

Размещена 17 января 2013 года

ххх: В субботу коробки, мебель ну и фортепиано потаскать не желаете?
ууу: Коробки - можно. Фортепиано - нахуй.
ххх: Ладно, уговорили. как насчет воскресенья?
ууу: Фортепиано - нахуй В ЛЮБОЙ ДЕНЬ НЕДЕЛИ, ВИТЕК!!!

Размещена 17 января 2013 года

Муж купает ребёнка, кричит из ванной:
- Кать, он ест пену!
Через пару минут:
- Кать, она реально вкусная