Изменяем CSS-параметры посредством JS

Опубликовано
Комментарии Нет

Для того, чтобы изменить существующий CSS-параметр, мы будем использовать для удобства отдельные JS-функции, которые можно (даже нужно) вынести в отдельный подключаемый файл.

Функции выглядят вот так:

<script type="text/javascript">
function addStyleSheet() {
	var style = document.createElement('style');
	style.type = 'text/css';
	document.getElementsByTagName('head')[0].appendChild(style);
	return document.styleSheets[document.styleSheets.length - 1];
}
function addStyle(ss, sel, rule) {
	if (ss.addRule) { ss.addRule(sel, rule); }
	else { if (ss.insertRule) { ss.insertRule(sel + ' {' + rule + '}', ss.cssRules.length); } }
}
</script>

После того как функции JS: addStyleSheet() и addStyle() объявлены приступаем к непосредственному изменению нужного CSS-параметра. Для этого необходимо вызвать функцию addStyle() с нужным набором параметров.

К примеру, нам нужно изменить высоту (height) у блока с id sections. Для этого выполняем команду:


<script type="text/javascript">
	addStyle(s, '#sections', 'height:500px;');
</script>

Использовать этот прием в своей работе или нет – решает каждый web-разработчик, но знать о такой возможности должен каждый.

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →