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

Никогда не был большим фанатом JS и всегда пытался любыми способами избежать его использование, но, в последнее время, для того, чтобы добиться большей гибкости в разработке пользовательских интерфейсов, в некоторых случаях использую JS. В некоторых случаях приходится использовать даже для редактирования CSS-параметров во внешнем CSS-файле.

Для меня самого это кажется диким, но иногда это требуется и без этого просто нельзя.

Для того, чтобы изменить существующий 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>

Вот и всё! Посли этого кода высота блока sections будет составлять 500 точек, чего нам и требовалось. После создания красивого и функционального сайта, можно браться и за продвижение сайта. Удобный для пользователя сайт продвигается намного легче, быстрее и дешевле.

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

Комментарии:

Имя
e-mail
Сайт
Текст комментария: