Изменение стиля css элемента

Я хочу изменить стиль .check-media, но это не сработает. Как это исправить?Изменение стиля css элемента

<!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>

источник

2016-01-14 rozero

Wrap вы код в документе готовый обработчик. http://learn.jquery.com/using-jquery-core/document-ready/ – Satpal

@Satpal это работает, но как сделать его динамичным? – rozero

@rozero, что вы имели в виду под динамикой? –

Вы можете достичь этого с помощью CSS в одиночку с помощью медиа запросов:

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

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

Example fiddle - изменить размер окна, чтобы увидеть его в действии.

Опираясь на Javascript для внесения изменений в пользовательский интерфейс, считается плохой практикой.

источник

2016-01-14 09:57:49

Ваш код выполняется перед последующим <div class='check-media'></div> даже оказанной (она ниже в DOM). Вам нужно подождать, пока DOM не будет готов (загружен), а затем вы сможете его изменить.

Чтобы сделать это, вы можете использовать следующий фрагмент кода (требуется Jquery):

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

источник

2016-01-14 09:48:54

Да, тогда вам нужно прослушать событие изменения размера. Это можно решить, используя '' $ (window) .resize (function() {...}); '' как @Maddy просто ответил. Но посмотрите также на запросы CSS @media. Это намного проще сделать с помощью простого CSS (например, http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) –

Вам нужно добавить скрипт в $(window).resize(function()

Или

добавления сценария в нижней части означает, что после того, как тело.

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

источник

2016-01-14 09:50:42

Напишите свой сценарий внутри.

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

Или ознакомьтесь с кодом ниже.

<!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>

источник

2016-01-14 10:06:13

Изменение стиля css элемента

ответ

Смежные вопросы