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";
    }
  }

}

jQuery：

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

从我的实验中可以看出，尽管设置了另一个值，但它只显示了一个值。控制台日志只会显示：wide-screens

有谁可以指出我做错了什么？

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

Answer 1

JavaScript无法与伪元素（::before，::after和更新的元素进行交互。因此，jQuery无法告诉你psuedo-elements＆＃39;的content属性是什么。 CSS就是，因此你的代码不会起作用。

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

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

或者（更混乱）依赖于＆＃34;真实＆＃34;的CSS属性。元件。

Jquery回复内容：之后

1 个答案: