我想更改 .check-media 的样式，但这不起作用。如何解决？
<!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>
最佳答案
您的代码在后续 <div class='check-media'></div> 之前执行甚至被渲染(它在 DOM 下方)。您需要等待，直到 DOM 准备好(加载)，然后您才能更改它。
为此，您可以使用以下代码片段(需要 jQuery):
$(document).ready(function() {
// your code here
});
关于jquery - 改变元素的CSS样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34786216/