通过检测css规则检查@media规则与javascript

Question

我知道matchMedia.js，但我想我可以用这样简单的东西来检测当前的@media规则。但是，它没有在firefox中运行 - （这通常意味着它首先不正确......）现在看一下，不应该将内容放在{{1}上伪元素？有什么建议？我有CodePen HERE:

CSS

:after

的jQuery

#test {
  content:  "small"
}

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

Answer 1

你在那里进行了一次非常有趣的测试！

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

  

适用于::之前和::之后的伪元素

来源：content - CSS | MDN

编辑＃1

我找到了适合你的东西;看起来可以在所有'：）之后得到content :after'。

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。