Changing css style of element

Question

I want to change a style of the .check-media but this does not work. How to fix it?

<!DOCTYPE html>
<html>
<head>
<style>
    .check-media{
        width:500px;
        background-color:gray;
    }
</style>

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

<script>
    if($('.check-media').width() <= 768) {
        console.log('You are in width: 768px');
    }else{
        console.log('You are out of width: 768px');
    }

    if($(window).width() < 768) {
        console.log('screen.width is LESS then 768px');
        $('.check-media').css({"background-color":"blue"});
    } else {
        console.log('screen.width is MORE then 768px');
        $('.check-media').css({"background-color":"red"});
    }
</script>

</head>

<body>

<h1>My First Heading</h1>
<div class='check-media'>check-media contentn</div>
<p>My first paragraph.</p>

</body>
</html>

Wrap you code in document-ready handler. learn.jquery.com/using-jquery-core/document-ready — Satpal
– Satpal, Commented Jan 14, 2016 at 9:46
Assuming you want to amend the layout of the page based on the screen size, use CSS media queries as they were designed for this exact purpose. — Rory McCrossan
– Rory McCrossan, Commented Jan 14, 2016 at 9:53

ssc-hrep3 · Accepted Answer · 2016-01-14 09:48:54Z

2

Your code is executed before the subsequent <div class='check-media'></div> is even rendered (it is below in the DOM). You need to wait, until the DOM is ready (loaded) and then you can change it.

To do this, you can use the following snippet (requires jQuery):

$(document).ready(function() {
   // your code here
});

answered Jan 14, 2016 at 9:48

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ssc-hrep3 Over a year ago

Yes, then you need to listen to the resize event. This can be solved by using $(window).resize(function() { ... } ); like @Maddy just answered. But take also a look at the CSS @media queries. This is much simpler done with plain CSS (e.g. w3schools.com/cssref/css3_pr_mediaquery.asp)

Mukul Kant · Accepted Answer · 2016-01-14 09:50:42Z

You need to add script in $( window ).resize(function()

Or

add script in bottom means after body.

$( window ).resize(function() {
    if($('.check-media').width() <= 768) {
        console.log('You are in width: 768px');
    }else{
        console.log('You are out of width: 768px');
    }

    if($(window).width() < 768) {
        console.log('screen.width is LESS then 768px');
        $('.check-media').css({"background-color":"blue"});
    } else {
        console.log('screen.width is MORE then 768px');
        $('.check-media').css({"background-color":"red"});
    }
    });

  .check-media{
        width:500px;
        background-color:gray;
    }

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

<h1>My First Heading</h1>
<div class='check-media'>check-media contentn</div>
<p>My first paragraph.</p>

Rory McCrossan · Accepted Answer · 2016-01-14 09:57:49Z

0

You can achieve this using CSS alone via Media Queries:

@media (max-width: 768px) {
  .check-media {
    background-color: blue !important;
  }
}

.check-media {
    background-color: red;
}

Example fiddle - change window size to see it in action.

Relying on Javascript to amend the UI is considered bad practice.

answered Jan 14, 2016 at 9:57

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Pang · Accepted Answer · 2016-01-19 05:12:43Z

Write your script inside.

$(document).ready(function(){
    write script here!
})

Or, check the code below.

<!DOCTYPE html>
<html>
<head>
<style>
    .check-media{
        width:500px;
        background-color:gray;
    }
</style>

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

<script>
  $(document).ready(function(){
    if($('.check-media').width() <= 768) {
        console.log('You are in width: 768px');
    }else{
        console.log('You are out of width: 768px');
    }

    if($(window).width() < 768) {
        console.log('screen.width is LESS then 768px');
        $('.check-media').css({"background-color":"blue"});
    } else {
        console.log('screen.width is MORE then 768px');
        $('.check-media').css({"background-color":"red"});
    }
    });
</script>

</head>

<body>

<h1>My First Heading</h1>
<div class='check-media'>check-media contentn</div>
<p>My first paragraph.</p>

</body>
</html>

Collectives™ on Stack Overflow

Changing css style of element

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related