HTML5, CSS3, jQuery. Портфолио html-верстальщика

Активное ("налету") изменение стилей в коде страницы

Опубликовано:
Бывают случаи при верстке макетов, когда нужно изменить стиль в зависимости количества элементов на странице. Как раз такая задача попалась мне недавно на одном из проектов.

Как известно, менять "налету" значения свойств в таблицах стилей мы не можем, значит нужно изменяемые свойства вынести в 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();
    });
    

Выгода такого подхода в том, что стили гораздо быстрее отрендерят страницу, нежели скрипт пропишет свойство ширины каждому элементу.

Понравилась статья? Поделитесь с другими!

Вы можете авторизоваться на сайте через:
VkontakteYandex

Вы должны авторизоваться, чтобы оставлять комментарии.

Комментарии (0)