Определяйте стили элементов для всех размеров экрана

В Javascript мы можем использовать что-то вроде window.getComputedStyle(element,null).getPropertyValue(property) для получения свойства стиля данного элемента. При этом любое свойство может измениться с помощью адаптивного веб-дизайна при любом размере экрана.

Мне интересно, можно ли проанализировать таблицу стилей, связанную с элементом, чтобы определить стили, которые будут применяться к нему во всех размерах/точках останова окна.

Например, <p> имеет font-size: 16px на настольном компьютере и font-size: 18px на мобильном устройстве (устанавливается @media (max-width: 768px) { ... }. Я хотел бы знать, что размер шрифта будет 18 пикселей на мобильном устройстве без необходимости изменять размер до мобильного размера и снова выбирать размер шрифта.

Я полагаю, что с некоторой умной обработкой текста в JS я мог бы отсортировать таблицу стилей для @media и посмотреть, отражается ли она на элементе, но для больших или нескольких таблиц стилей, встроенных стилей и внедренных стилей этот метод, вероятно, будет невозможно получить на 100% точно. .

Любые идеи?

Мысль...

Можно ли обернуть элемент в смоделированный (скрытый) элемент window, а затем использовать JS для изменения его размера, чтобы он запускал медиа-запросы?

Другой подход...

Я начал играть с document.styleSheets, но даже это кажется довольно невыполнимой задачей, чтобы добиться совершенства. В моем примере ниже я обернул выделенный текст в элемент, а затем передал его методу ниже (написанному на coffeescript).

analyzeSelectiontyles: (selectionElement) ->
    selectionParents = []
    while selectionElement
        selectionParents.unshift selectionElement
        selectionElement = selectionElement.parentNode

    pageStylesheets = document.styleSheets

    for stylesheet in pageStylesheets
        rules = stylesheet.cssRules
        for rule of rules
            if rules[rule]["type"] is 1
                console.log 'standard style'
            if rules[rule]["type"] is 4
                console.log 'media query'
            # If it's a standard style rule or a media query containing
            # style rules we have to check to see if the style rule applies
            # to any one of our selectionParents defined above, and in
            # Which order so as to simulate "cascading"

javascript responsive-design media-queries stylesheet text-analysis
person Jody Heavener    schedule 18.12.2014    source источник
comment
как насчет использования iframe?   -  person Hacketo    schedule 22.12.2014
comment
Вы хотите проверить один, несколько или все атрибуты любой ширины? Почему вы хотите это сделать (это своего рода проверка качества кода) (это может помочь найти правильное решение)? В/на каких браузерах это должно работать?   -  person try-catch-finally    schedule 22.12.2014
comment
@Hacketo не думаю, что iFrame будет работать, потому что 1) мне придется снова перезагружать всю страницу, 2) мои обстоятельства не позволяют мне взаимодействовать с iFrame из-за CORS   -  person Jody Heavener    schedule 22.12.2014
comment
@try-catch-finally В основном я хочу иметь возможность создавать наложение выделения поверх текста в iFrame. Мне нужно знать, какой размер/ограничения имеет текст при всех размерах экрана, чтобы я мог соответствующим образом настроить наложение.   -  person Jody Heavener    schedule 22.12.2014
comment
.oO( This Q is sort of X/Y problem ) Похоже, вы можете прекрасно понять это во время выполнения, нет необходимости знать размер во всех точках останова перед загрузкой страницы. Просто измерьте элемент в тот момент, когда вы хотите отобразить наложение, и, возможно, добавьте обработчик изменения размера для повторного выравнивания во время изменения размера.   -  person try-catch-finally    schedule 22.12.2014
comment
размер экрана — это еще не все, что имеет значение; Масштаб браузера и размер шрифта ОС также влияют на размер текста, что делает предварительное определение бесполезным.   -  person dandavis    schedule 25.12.2014

Ответы (2)


arrow_upward
2
arrow_downward

Что-то вроде следующего может работать, если все стили размещены на тот же источник. Я протестировал его здесь, и он не смог получить файл all.css; Я предполагаю, потому что он размещен на другом домене cdn.

function css(element) {
    var sheets = document.styleSheets,
    standard = [],
    mediaStyles = {};
    element.matches = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || element.oMatchesSelector;

    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (element.matches(rules[r].selectorText)) {
                if (rules[r]["type"] === 4) {
                    mediaStyles[rules[r].media] = (mediaStyles[rules[r].media] || []).push(rules[r].cssText);
                } else {
                    standard.push(rules[r].cssText);
                }
            }
        }
    }

    return { 'standard': standard, 'media': mediaStyles };
}
person Makaze    schedule 21.12.2014
comment
Я использовал кое-что, немного отличающееся от этого, но в целом, я думаю, это самое близкое, что мы можем получить. Благодарю вас! - person Jody Heavener; 26.12.2014

arrow_upward
1
arrow_downward

Если вы хотите получить все правила css для определенного элемента (особенно медиазапроса), вам не нужно анализировать каждый файл css. Вы можете использовать window.getMatchedCSSRule. После этого проверьте возвращенные правила css, если они имеют родительское правило mediaquery.

person Michał Szepielak    schedule 21.12.2014