Взаимодействие 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-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

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

Фреймворк Vue.js

Фреймворк Vue.js

Vue (произносится как view – вью) – это прогрессивный фреймворк для создания пользовательских интерфейсов. Vue позволяет строить приложения с применением архитектурного паттерна MVVM (Model-View-ViewModel). Особенность

 
Фреймворки и библиотеки в JavaScript

Фреймворки и библиотеки в JavaScript

JavaScript — это мультипарадигмальный язык программирования, который поддерживает типы программирования, управляемые событиями, функциональные и обязательные (в том числе объектно-ориентированные и основанные на прототипах). Фреймворки JavaScript

 
Знакомство с Ajax.

Знакомство с Ajax.

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML,

 
Знакомство с jQuery

Знакомство с jQuery

jQuery — это библиотека JavaScript, в основу которой положено взаимодействие JavaScript и HTML. Она позволяет легко получить доступ к любому элементу DOM, с ее помощью

 

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

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