доступ к значениям свойств псевдоэлемента через getComputedStyle в dart

Я хочу определить, какой медиа-запрос активен - я использую Bootjack, поэтому я использую точки останова по умолчанию.

Я ожидал, что смогу использовать getComputedStyle(), чтобы получить значение свойства 'content' в приведенном ниже примере, но, похоже, я не правильно понял синтаксис. Я могу с радостью получить значение элемента - скажем, семейство шрифтов в теле, но не псевдоэлементы...

Вот что я делаю:

Учитывая этот css..

/* tablets */
@media(min-width:768px){
     body::after {
        content: 'tablet';
        display: none;
    }

}

@media(min-width:992px){
     body::after {
        content: 'desktop';
        display: none;
    }

}
@media(min-width:1200px){
   body::after {
        content: 'large-screen';
        display: none;
    }
 }

У меня есть это в моем файле дротика:

String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');

но activeMediaQuery всегда пуст.

Я пробовал ('after') и (':after') и еще что-то странное и замечательное, но безрезультатно.

String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');

устанавливает переменную activeMediaQuery в значение семейства шрифтов, которое я использую (хотя это не очень полезно для меня!)

Что я должен делать?


dart getcomputedstyle pseudo-element
person theTechnaddict    schedule 26.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы также можете подписаться на события изменений MediaQuery.

для получения дополнительной информации см. https://github.com/bwu-dart/polymer_elements/blob/master/lib/polymer_media_query/polymer_media_query.dart

В Dart есть ошибка, и обходной путь использует dart-js-interop.

Это код элемента полимер-медиа-запрос. Я не знаю, действительны ли комментарии not suppored in Dart yet. Прошло несколько месяцев с тех пор, как я попробовал это.

Вот пример страницы, которая показывает, как использовать элемент. https://github.com/bwu-dart/polymer_elements/blob/master/example/polymer_media_query.html

  var _mqHandler;
  var _mq;

  init() {
    this._mqHandler = queryHandler;
    mqueryChanged(null);

    if (_mq != null) {
      if(context['matchMedia'] != null) {
        _mq.callMethod('removeListener', [_mqHandler]);
      }
      // TODO not supported in Dart yet (#84)
      //this._mq.removeListener(this._mqHandler);
    }

    if (mquery == null || mquery.isEmpty) {
      return;
    }

    if(context['matchMedia'] != null) {
      _mq = context.callMethod('matchMedia', ['(${mquery})']);
      _mq.callMethod('addListener', [_mqHandler]);
      queryHandler(this._mq);
    }
    // TODO not supported in Dart yet (#84)
    // Listener hast to be as MediaQueryListListener but this is and abstract 
    // class and therefor it's not possible to create a listner
    // _mq = window.matchMedia(q);
    // _mq.addListener(queryHandler);
    // queryHandler(this._mq);
  }

  void queryHandler(mq) {
    queryMatches = mq['matches'];
    //fire('polymer-mediachange', detail: mq);
  }

Это сработало для меня с CSS, который вы указали в своем вопросе, но только тогда, когда окно было шире 768 пикселей. Вы можете пропустить правило с max-width: 768px

import 'dart:html' as dom;

void main () {
  dom.window.onResize.listen((e) {
    var gcs = dom.document.body.getComputedStyle('::after');
    print(gcs.content);
  });
}
person Günter Zöchbauer    schedule 26.05.2014
comment
Черт возьми, это какой-то скачок - он предполагает, что я мог бы обмениваться изображениями разного размера на основе медиа-запросов, заключая теги img в тег полимер-медиа-запроса - я правильно это понимаю? Если это так, все изображения будут загружены в процессе подготовки - смысл в том, чтобы начать с небольшого изображения по умолчанию, чтобы сэкономить пропускную способность для мобильных пользователей. - person theTechnaddict; 26.05.2014
comment
Вам не нужно оборачивать каждое изображение, но вы можете создать тег изображения с поддержкой мультимедиа, который подписывается на событие on-media-change одного элемента полимера-медиа-запроса, размещенного где-то на странице, или вы можете включить приведенный выше код. непосредственно в тег изображения с поддержкой мультимедиа и соответствующим образом обновите атрибут src. - person Günter Zöchbauer; 26.05.2014
comment
Я все еще не могу получить доступ к псевдоэлементу - пока я преследую свои цели, используя привязку данных, как вы предлагаете, как ученик меня беспокоит, что я не могу сделать что-то, что есть в документах - я предполагаю, что второй блок кода является прямым ответом на мой вопрос и стоит отдельно, не зависящий от полимерного элемента или связанного с ним кода - используя его или мой исходный код, я могу получить доступ к любому свойству элемента, но не к свойствам ::after или : :до и т.д.. - person theTechnaddict; 27.05.2014
comment
На данный момент придерживаюсь исходного вопроса... об удалении "display: none"; исходный код работает - хотя содержимое отображается - и я, кажется, нахожу, как и вы, что 768px пропускается - я думаю, я могу найти другой атрибут, который ничего не испортит, но почему отсутствие отображения означает, что он доступен Dart ? - person theTechnaddict; 27.05.2014
comment
Я не думаю, что что-то пропущено. Вам нужно добавить правило с max-with: 768 или min-with: 0 - person Günter Zöchbauer; 27.05.2014
comment
Использование видимости: скрытый работает, и проблема с 768 сводилась к комментарию над ним - удаление строки комментария (или, возможно, ее исправление!), И правило работает нормально... Итак, исходный вопрос решен - проблема была не в :: после, а скорее на дисплее: нет - я просматривал ваш вариант, но любые дополнительные вопросы я отвечу отдельно - большое спасибо за ваше объявление о помощи за предоставленную очень ценную растяжку. - person theTechnaddict; 27.05.2014