屏幕宽度更改后，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 Link: https://jsfiddle.net/misteeque/q5t5j7q3/4/

Basically I want the text color changed to red and green when screen size is between 400 and 500, which happens without any problem, but when the screen size is changed back out of the range, ie either more than 500 or less than 400, the color remains red and green, and it is not changed back to black, as I've defined in CSS.

What is going wrong in here? Thanks.

Note that using both CSS and jQuery is mandatory here.

Answer 1

The styles that you've added through Javascript dont' get removed once the screen goes out of that 400-500 range.

You could add a check to make sure they reset, but this is much, much easier with CSS media queries:

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

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

Answer 2

Inline element styles have higher specificity than any css applied styles, so you can solve the issue by clearing style attribute of the elements in else clause of your if statement like this...

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

You can add else and remove the css you have added (watch it in "full page" and change the screen size)

 $(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>