屏幕宽度更改后，CSS属性不适用。 同时使用CSS和jQuery

Question

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>This is a paragraph.</p>
<div class="one">Hello World</div>

CSS：

p, div.one {
  color: black;
}

Javascript：

$(window).resize(function() {
    console.log('resize called');
    var width = $(window).width();
    if (width >= 400 && width <= 500) {
      $(document).ready(function() {
        $("p").css("color", "red");
        $("div.one").css("color", "green");
      });
    }
  })
  .resize();

JSFiddle链接： https ：//jsfiddle.net/misteeque/q5t5j7q3/4/

基本上，我希望在屏幕大小介于400到500之间时，将文本颜色更改为红色和绿色，这没有任何问题，但是当屏幕大小更改回超出范围时，即大于500或小于400时，颜色保持为红色和绿色，并且不更改为黑色，正如我在CSS中所定义的那样。

这里出了什么问题？ 谢谢。

请注意，此处必须同时使用CSS和jQuery。

Answer 1

屏幕超出该400-500范围时，您通过Javascript添加的样式不会被删除。

您可以添加检查以确保它们重置，但是使用CSS媒体查询则要容易得多：

@media (min-width: 400px) and (max-width:500px) {
  p { color: red }
  div.one { color: green }
}

https://jsfiddle.net/q5t5j7q3/7/

Answer 2

内联元素样式比任何CSS应用样式都具有更高的特异性，因此可以通过清除if语句else子句中元素的style属性来解决此问题，如下所示...

if (width >= 400 && width <= 500) {
  $("p").css("color", "red");
  $("div.one").css("color", "green");
} else {
  $("p,div.one").attr("style", "");
}

JSFiddle
https://jsfiddle.net/q5t5j7q3/8/

Answer 3

您可以添加else并删除已添加的CSS（在“整页”中观看并更改屏幕尺寸）

 $(window).resize(function() { console.log('resize called'); var width = $(window).width(); if (width >= 400 && width <= 500) { $(document).ready(function() { $("p").css("color", "red"); $("div.one").css("color", "green"); }); } else { $(document).ready(function() { $("p").css("color", ""); $("div.one").css("color", ""); }); } }) .resize(); 

 p, div.one { color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <p>This is a paragraph.</p> <div class="one">Hello World</div>