我是javascript初學者，我創(chuàng)建了一個簡單的項目來理解DOM 風格但是面臨一個問題。有一個紅色背景和藍色的p標簽 顏色懸停效果。我在p上放了一個onclick事件，當用戶點擊p時， 其背景顏色變?yōu)槌壬栴}是當背景顏色 隨著onclick事件的變化，懸停效果將不再有用。 那么有沒有問題或者這是javascript的常規(guī)行為？
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>這里的問題是由于內聯樣式具有最高的特異性。有許多解決方案，使用！“重要”通常是一個糟糕的解決方法，因為隨著項目變得越來越大以及其他各種原因，它很難工作。
作為初學者，現在是養(yǎng)成良好習慣的時候了。所以對于我的回答，我去掉了你的內聯onclick和內聯樣式改變。
我使用一個事件監(jiān)聽器和querySelector來定位你的段落。
然后，我將向該元素添加一個類(您也可以在單擊時使用toggle來添加/刪除)。
對于CSS，我通過#p2.orange定位元素(orange是我的類名)。我把它放在CSS本身的懸停上面。
const p = document.querySelector("#p2");
p.addEventListener("click",() => {
p.classList.add("orange");
});#p2 {
background-color: red;
}
#p2.orange{
background-color:orange;
}
#p2:hover {
background-color: blue;
}<p id="p2"> text </p>我的建議是定義具有相同優(yōu)先級的類，以防止使用！重要；(這可能會產生其他問題)
<html>
<head>
<style>
#p2.red {
background-color: red;
}
#p2.orange {
background-color: orange;
}
#p2:hover {
background-color: blue;
}
</style>
</head>
<body>
<p id="p2" class="red" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").classList.toggle("orange");
}
</script>
</body>
</html>這是JavaScript的常規(guī)行為。
當您使用JavaScript更改元素的背景色時，比如:document . getelementbyid(& quot；p2 & quot)style.backgroundColor = & quot橙色& quot 它直接修改該元素的內聯樣式，該樣式優(yōu)先于CSS中定義的任何樣式，包括懸停效果。
這里有一個CSS特異性層次的列表。
因為內聯樣式具有更高的特異性，它將覆蓋您的css屬性。你可以通過添加來抵消這一點！對你的懸停風格很重要:
<html>
<head>
<style>
#p2 {
background-color: red;
}
#p2:hover {
background-color: blue !important;
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.getElementById("p2").style.backgroundColor = "orange";
}
</script>
</body>
</html>你可以使用CSS變量來改變:懸停顏色。
:root{--clr:#0000ff;}設置初始顏色，
background-color: var(--clr);將變量分配給背景色樣式。
document.querySelector(':root').style.setProperty('--clr','orange');然后從JavaScript更改變量。
<html>
<head>
<style>
:root{
--clr:#0000ff;
}
#p2 {
background-color: red;
}
#p2:hover {
background-color: var(--clr);
}
</style>
</head>
<body>
<p id="p2" onclick="test()"> text </p>
<script>
function test() {
document.querySelector(':root').style.setProperty('--clr','orange');
}
</script>
</body>
</html>