CODEWITHSUNDEEP
jquerycss
rozero
rozero

Reputation: 149

Changing css style of element

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>

Upvotes: 0

Views: 134

Answers (4)

Ajay Malhotra
Ajay Malhotra

Reputation: 838

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

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>

Upvotes: 2

ssc-hrep3
ssc-hrep3

Reputation: 16069

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

Upvotes: 2

Related Questions