Взаимодействие JavaScript и CSS.



Что же такое CSS?

Каскадные таблицы стилей (Cascading Style Sheets — CSS) — это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе.

Также они представляют интерес и для программистов, пишущих на языке JavaScript, т.к. позволяют воспроизводить анимационные эффекты, такие как плавное появление содержимого документа или сворачивание и разворачивание списков, благодаря чему пользователь получает возможность управлять объемом отображаемой информации.

Управление встроенными стилями

Самый простой способ управления стилями CSS — это манипулирование атрибутом style отдельных элементов документа. В JavaScript свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Например, чтобы вывести содержимое текстового элемента «m» крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:

m.style.fontSize = "28px";
m.style.fontWeight = "bold";
m.style.color = "blue";

При работе со свойствами стиля объекта CSSStyleDeclaration нельзя забывать, что все значения должны задаваться в виде строк.

m.style.position = "absolute";
m.style.fontFamily = "sans-serif";
m.style.backgroundColor = "#ffffff";

И еще надо помнить, что во всех свойствах позиционирования должны быть указаны единицы измерения. Единицы измерения обязательны при установке свойств стиля в JavaScript — так же, как при установке свойств стиля в таблицах стилей:

m.style.left = 600; // Неправильно: это число, а не строка
m.style.left = "600"; // Неправильно: отсутствуют единицы измерения
m.style.left = "600px"; // Правильно

Управление таблицами стилей

Cуществует возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной. При работе с самими таблицами стилей придется столкнуться с двумя типами объектов.

Первый тип — это объекты Element, представляющие элементы <style> и <link>, которые содержат или ссылаются на таблицы стилей и второй тип объектов — объекты CSSStyleSheet, представляющие сами таблицы стилей. Если в элементе <style> или <link>, определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.

Включение и выключение

Элементы <style> и <link> и объекты CSSStyleSheet определяют свойство disabled, доступное сценариям на языке JavaScript для чтения и записи. Если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться браузером.

Это наглядно демонстрирует функция disableStylesheet(), представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll() и установит в значение true свойство disabled всех полученных элементов:

function disableStylesheet(ss) {
	if (typeof ss === "number")
		document.styleSheets[ss].disabled = true; 
	else {
		var sheets = document.querySelectorAll(ss);
		for(var i = 0; i < sheets.length; i++)
			sheets[i].disabled = true;
	}
}

Создание новых таблиц стилей

В JavaScript имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве браузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент <style> и вставляется в документ в раздел <head>, затем с помощью свойства innerHTML добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet(), а текст таблицы стилей добавлять с помощью свойства cssText. Пример создания новых таблиц:

function addStylesheet(styles) {
	// Сначала необходимо создать новую таблицу стилей 
	var styleElt, styleSheet;
	
	if (document.createStyleSheet) { //Если определен IE API, использовать его
		styleSheet = document.createStyleSheet();
	}
	else {
		var head = document.getElementsByTagName("head")[0];
		styleElt = document.createElement("style");		// Новый элемент <style>
		head.appendChild(styleElt);						// Вставить в <head>
		
		// Теперь новая таблица находится в конце массива
		styleSheet = document.styleSheets[document.styleSheets.length-1];
	}
	
	// Вставить стили в таблицу 
	if (typeof styles === "string") {
		// Аргумент содержит текстовое определение таблицы стилей
		if (styleElt) 
			styleElt.innerHTML = styles;
		else styleSheet.cssText = styles;	// IE API
	}
	else {
		// Аргумент объект с правилами для вставки 
		var i = 0;
		for(selector in styles) {
			if (styleSheet.insertRule) {
				var rule = selector + " {" + styles[selector] + "}"; 
				styleSheet.insertRule(rule, i++);
			}
			else {
				styleSheet.addRule(selector, styles[selector], i++);
			}
		}
	}
}

И в конце хочу представить очень хорошую таблицу основных свойств CSS и их аналогов в JavaScript. Уверен она поможет подобрать нужные свойства для работы в JavaScript:

Свойство CSSАналог JavaScript
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Chinese (Traditional)EnglishJapaneseRussianUkrainian

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: