通过检测 css 规则使用 javascript 检查@media 规则

Question

我知道 matchMedia.js，但我想我可以像这样简单地检测当前的@media 规则。但是，它在 firefox 中不起作用——（这通常意味着它一开始就不正确……）现在看看，内容不应该在 :after 伪元素上吗？有什么建议吗？我有一个CodePen HERE:

CSS

#test {
  content:  "small"
}

@media only screen and (min-width: $bp1) {
  #test {
    content: "medium"
  }
}

jQuery

​​>

var sizeCheck = function() {
  
  if ( $("#test").css('content') === 'small') {
    
    $('.proof').text('jQuery knows this page is SMALL from reading the CSS @media rules.');

  } else if ( $("#test").css('content') === 'medium') {
    
    $('.proof').text('jQuery knows this page is MEDIUM from reading the CSS @media rules.');

  }
    
};

// run the function on document ready
$(document).ready(sizeCheck);

// AND run the function on window resize event
$(window).resize(sizeCheck);

Answer 1

你有一个相当有趣的测试！

回答您的问题：是的，content 只能与 :after 和 :before 伪类一起使用。

适用于 ::before 和 ::after 伪元素

来源：content - CSS | MDN

编辑 #1

我为你找到了一些东西；看起来有可能得到:after的content'毕竟':)

var content = window.getComputedStyle(
    document.querySelector('#test'), ':after'
).getPropertyValue('content');

来源：Get Pseudo-Element Properties with JavaScript

我不习惯 CodePen，所以创建了一个jsfiddle。

编辑#2

看起来 FireFox 在实际值上添加了一个双重代码，所以在控制台中它看起来像这样：""string""。

解决这个问题的方法可能是像这样对两者进行测试：

if (content == '"small"' || content == 'small') {
    // ...
}

我更新了the fiddle here。