(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Модифицируем CSS свойства через JavaScript

Источник: webmagazine

Представляю Вашему вниманию универсальный метод для манипулирования 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.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Дискуссии и обсуждения общего плана »
Написать редактору 
 Рекомендовать » Дата публикации: 26.05.2008 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
IBM Domino Messaging Client Access License Authorized User License + SW Subscription & Support 12 Months
ESET NOD32 Parental Control – универсальная лицензия на 1 год для всей семьи
FastReport.Net Professional Edition Single License
ABBYY PDF Transformer+ Full
ABViewer Enterprise пользовательская
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
CASE-технологии
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Один день системного администратора
Программирование на Visual С++
Все о PHP и даже больше
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Помощь по MS Access (328)
Доброе время суток. Случайно оказался на этом сайте, искал статьи по OLAP. Вижу, что...
 
Модульный метод создания сайтов (5)
Модульный метод создания (компоновки) сайтов на основе наборов типовых отлаженных функциональных...
 
Excell не печатает :-( (2)
Почему то Excell не печатает страницы в альбомной ориентаций, то есть страница в аольбомной...
 
Как извлечь рисунки из файла Word (41)
Вообще-то есть еще способ - сделать в Word-е Copy рисунка, открыть Microsoft Photo Editor и там:...
 
Надстройка "Поиск решения" MS Excel (6)
Помогите решить задачу с помощью " поиск решения" мука яйца ...
 
 
 



    
rambler's top100 Rambler's Top100