<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Working With DOM</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#gold").addClass("highlight");
});
</script>
<style type="text/css">
body{background-color:#FFCC66;}
#wrap
{margin:0 auto;
border:2px solid #CC8320;
height:500px;}
h1{font-style:italic;
color:#A48713; padding-left:10px;}
#gold{width:200px;
background-color:#D49F55;
height:150px; margin:20px; float:left;height:200px}
input{border:1px solid black; width:150px; margin:0 20px;
background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center; }
.info{border:1px solid black; width:150px;background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center;margin:0 20px; }
.highlight{background-color:green;}
</style>
</head>
<body>
<div id="wrap">
<h1> Learning Web Engineering Online</h1>
<div data-price="399.99" id="gold">
<h3>Gold Member</h3>
<ul class="course">
<li>HTML5</li>
<li>css3</li>
<li>jquery</li>
</ul>
<form>
<input type="button" value="GET PRICE"/>
</form>
</div>
</div>
</body>
我对上面的代码有问题，当使用 jquery 时，我将类高亮添加到 id=gold 的元素并在 chrome 中检查它，尽管该类被添加到代码中，但高亮类中提到的样式规则没有在浏览器中输出。正在选择元素但未设置样式。我做错了什么请帮助别人。
最佳答案
你应该使用 !important 来处理它:
.highlight{background-color:green !important;}
备注:
浏览器使用比类名更重要的ID。
关于javascript - addClass() 函数未应用于 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18848133/