Для того, чтобы изменить существующий 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-разработчик, но знать о такой возможности должен каждый.
Комментарии
Нет комментариев к данной статье.
Комментарии