Używam wielu bibliotek (w tym moich własnych) do dynamicznego ładowania zasobów na podstawie zapytań o media, które opisałem w plikach CSS. Na przykład:

W CSS:

  @media screen and (max-width: 480px) {
    .foo {
      display: none;
    }
  }

I za pomocą modułu ładującego zasoby;require.js, modernizr.js itp. lub za pomocąwindow.matchMedia i związaneaddListener() Funkcje:

  if (function("screen and (max-width: 480px)")){
    // Load several files
    load(['mobile.js','mobile.css']);
  }

Dwukrotne zadeklarowanie ich jest niewygodne / głupie i, o ile mogę znaleźć, wszystkie biblioteki pomocnicze JS i programy ładujące zasoby wymagają powtórzenia zapytań o media zamiast ich lokalizowaniaprogramowo z JS / DOM.

Zbadałem więc możliwość programowego uzyskiwania dostępu do wartości za pośrednictwemdocument.stylesheets, ale nie jestem pewien, czy są dostępne i wydaje się, że jest bardzo mało dokumentacji, która by im sugerowała.

Najdalej szukamCSSMediaRule i używanieconsole.dir(document.stylesheets) między innymi do zbadania obiektu arkusza stylów.

Ale nie ma żadnych odniesień (wewnątrzdocument.stylesheets) do rzeczywistych reguł zapytań o media używanych w CSS - tylko klasy do zastosowania w wyniku zapytań o media ... Próbuję zlokalizować programowo:

„ekran i (max-width: 480px)”

Czy jest jakiś sposób na uzyskanie dostępu do takiego zapytania CSS Mediazasady przez JavaScript / DOM?