javascript - 通过检测 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 伪类一起使用。

Applies to ::before and ::after pseudo-elements

来源:content - CSS | MDN

编辑#1

我为你找到了一些东西；看起来有可能获得 :after 'after all' 的 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 .