jQuery функция .css()

Раздел: Основы CSS

Описание: Получить или установить одно или несколько свойств CSS для каждого соответствующего элемента

Опции: $( elem ).css( имя, [ значение ] )

Примеры использования:

Пример №1: Получить значения CSS

Чтобы получить значение свойства CSS элемента, используем следующее выражение $( elem ).css( имя )

html:
<style>
.test1 {
	border: 2px solid #060;
	height: 50px;
	width:300px;
	text-align:center;
	margin: 12px auto;
	background: #FF6
	}
</style>
javascript:
 var width = $("#test1").css('width');// результатом будет: 300px
 var height= $("#test1").css('height');// результатом будет: 50px
 var height= $("#test1").css('text-align');// результатом будет: center
 // не правильное использование
 var background= $("#test1").css('background');// результатом будет: ''
 //правильное использование
 var background= $("#test1").css('background-color');// результатом будет: rgb(255, 255, 102)

Здесь надо отменить, что различные браузеры могут по разному возвращать значения цвета в CSS

Например #FFF, #ffffff, and rgb(255,255,255)

Получение CSS свойства для margin , background, border

background - background-color

margin - Если заданы стили margin-bottom, margin-left, margin-right, margin-top

border - borderTopWidth, borderRightWidth, borderLeftWidth, borderBottomWidth

Чтобы получить весь массив свойств: $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]). и так далее.

Пример №2: Установить значения CSS

Одно свойстро: $( elem ).css( "background-color", "yellow" );

Массив свойств: $( elem ) .css( { 'background-color' : 'yellow', 'font-weight' : 'bolder' } );

Живые примеры CSS:


«Поделиться»

Комментарии - 0

Добавить комментарий