Активное ("налету") изменение стилей в коде страницы
Опубликовано:
Бывают случаи при верстке макетов, когда нужно изменить стиль в зависимости количества элементов на странице. Как раз такая задача попалась мне недавно на одном из проектов.
Как известно, менять "налету" значения свойств в таблицах стилей мы не можем, значит нужно изменяемые свойства вынести в html-код и уже там проводить манипуляции. Следующий код определяет свойство ширины элемента в зависимости от ширины экрана, и записывает значения в стили, которые добавляются к шапке страницы.
var doc = $(document); var resizeGames = function () { var ww = doc.width(); if (ww >= 1770) { counts = 10; } else if (ww >= 1600 && ww < 1769) { counts = 9; } else if (ww >= 1415 && ww < 1599) { counts = 8; } else if (ww >= 1255 && ww < 1414) { counts = 7; } else if (ww >= 1050 && ww < 1414) { counts = 6; } else if (ww >= 1000 && ww < 1049) { counts = 5; } var w = Math.floor(($('.games.type-2').width() - 9 - (17 * counts)) / counts); var rule = getCssRule(0); rule.style.setProperty('width', w + 'px', null); rule.style.setProperty('height', Math.floor(w * 0.75) + 'px', null); }; var getCssRule = function (index) { var cssRule = null; for (var i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].title == "gl") { var styleSheet = document.styleSheets[i]; if (styleSheet.cssRules) { cssRule = styleSheet.cssRules[index]; } else { cssRule = styleSheet.rules[index]; } return cssRule; } } }; $("head").append("<style title=\"gl\">.games.type-2 .item {width: 125px; height: 93px;}</style>"); resizeGames(); $(window).resize(function(){ resizeGames(); });
Выгода такого подхода в том, что стили гораздо быстрее отрендерят страницу, нежели скрипт пропишет свойство ширины каждому элементу.
Комментарии (0)