Jquery对内容的响应：

Question

我在我的项目中设置了各种媒体查询，根据视图端口将body:after内容更改为不同的值。

为此，我制作了一个Codepen，并在一个名为.example的div上添加了我的值

Scss:

.example{
  width: 10%;
  height: 100px;
  background: Tomato;
  position: relative;
  float: left;
  color: black;
  margin-right: 20px;

  @include respond-to(wide-screens) {
    &:after{
      content: "wide-screens";
    }
  }


  @include respond-to(ninesixty) {
    width: 32.333%;
    margin-right: 1%;
    margin-bottom: 1%;
    &:after{
      content: "ninesixty";
    }
  }

  @include respond-to(handhelds) {
    width: 49%;
    margin-right: 1%;
    margin-bottom: 1%;
    &:after{
      content: "handhelds";
    }
  }

}

the jQuery:

if ($('.example').css("content","wide-screens")){
  console.log("wide-screens");
}
else if ($('.example').css("content","ninesixty")){
  console.log("ninesixty");
}

不过，从我的实验来看，它只显示了一种价值，尽管另一种价值被设定了。控制台日志将只显示：wide-screens

有人能指出我做错了什么吗？

The Codepen: http://codepen.io/vdecree/pen/LybJh

Answer 1

JavaScript不能与psuedo元素(::before、::after和新元素)交互。因此，jQuery无法告诉您上述psuedo元素的CSS的content属性是什么，因此您的代码无法工作。

相反，您应该在JS中实现媒体查询：

if( window.innerWidth <= 640) {
    /* equivalent to @media all and (max-width:640px) */
}

或者(更混乱地)依赖于"real“元素的CSS属性。