Модифікуємо CSS властивості через JavaScript

Уявляю Вашій увазі універсальний метод для маніпулювання CSS властивостями у Javascript сценаріях. Протестовано в усіх сучасних браузерах (включаючи IE6).


Ви можете запитати мене: а навіщо це потрібно, якщо є CSS? Ну наприклад, для створення анімації якого-небудь елемента при певному подію або вам потрібно дізнатися значення властивості елемента. У мене рік тому був один проект, де через систему управління для різних розділів довантажувати флешки різної висоти і необхідно було для елемента <div> прописати цю висоту. Прорахунок висоти здійснював PHP і підставляв її значення в простій JS сценарій.


Таблиця відповідності 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


Приклад використання:


 


function $() {


var elements = new Array();

for (var i = 0; i < arguments.length; i++) {


var element = arguments[i];


if (typeof element == “string”)


element = document.getElementById(element);

if (arguments.length == 1)


return element;

elements.push(element);


}

return elements;


}

/ / Після завантаження сторінки


window.onload = function() {


/ / Встановимо блоку з id = mydiv висоту 95px


/ / УВАГА! не забувайте вказувати px або pt


$(“mydiv”).style.height=”95px”;

/ / Виведемо значення ширини блоку mydiv


alert($(“mydiv”).style.width);


}


Ви напевно звернули увагу на функцію $() я її взяв з бібліотеки Prototype, щоб не використовувати кожен раз getElementById.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*