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

Question

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

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

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

Я полагаю, что с помощью некоторой умной обработки текста в 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" 

Answer 1

Возможно, что-то вроде следующего iff все стили размещены на same origin. Я тестировал его здесь, и он не смог получить файл 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 }; 
} 

Answer 2

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