JavaScript禁用外部CSS的效果？

我有一個簡單的情況，我有三個只讀輸入文本，懸停我通過CSS更改其背景，並點擊我想永久更改點擊框的背景（直到下一個被點擊），但只要我點擊在一個CSS的懸停效果被禁用，而在顏色不再懸停改變..代碼和輸出低於：JavaScript禁用外部CSS的效果？

function Calculate(id) 
 
{ 
 
    var list = document.getElementsByClassName("options"); 
 
    for (var i = 0; i < list.length; i++) { 
 
     list[i].style.background = 'none'; 
 
    } 
 
    document.getElementById(id).style.background = '#d1d1d1'; 
 
}

.options:hover { 
 
\t background:#d1d1d1; 
 
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

來源

2015-05-08 Abdul Jabbar

你正在改變每個類元素ra的屬性比點擊一個。你可以將_this_傳遞給你的函數而不是id。 – briosheje

什麼是for循環？ – Zee

@briosheje如何更改每個元素的屬性，因爲id是唯一的.. –

使用!important; CSS屬性後，因爲你使用background JavaScript代碼中的屬性，即添加樣式內聯，以便CSS中的屬性覆蓋行CSS

function Calculate(id) 
 
{ 
 
    var list = document.getElementsByClassName("options"); 
 
    for (var i = 0; i < list.length; i++) { 
 
     list[i].style.background = 'none'; 
 
    } 
 
    document.getElementById(id).style.background = '#d1d1d1'; 
 
}

.options:hover { 
 
\t background:#d1d1d1 !important; 
 
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

如果你不想更新CSS，那麼你也可以使用JavaScript removeProperty()函數刪除內嵌background屬性，見下面的代碼

function Calculate(id) 
{ 
    var list = document.getElementsByClassName("options"); 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.removeProperty('background'); 
    } 
    document.getElementById(id).style.background = '#d1d1d1'; 
}

來源

2015-05-08 10:47:09 Girish

以下是你的解決方案檢查是否有任何顏色，然後刪除它。

if(list[i].style.background != "")

更新的例子。的

function Calculate(id) 
 
{ 
 
    var list = document.getElementsByClassName("options"); 
 
    for (var i = 0; i < list.length; i++) { 
 
     if(list[i].style.background != "") 
 
     list[i].style.background = ''; 
 
    } 
 
    document.getElementById(id).style.background = '#d1d1d1'; 
 
}

.options:hover { 
 
\t background:#d1d1d1; 
 
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

來源

2015-05-08 10:49:43 ketan

這不起作用 - 如果單擊一個元素，然後單擊另一個元素，則不會獲得上一個單擊元素的懸停樣式 –

而不是設置背景'none'，只需將其設置爲''，這應該刪除背景樣式，讓CSS接管：

function Calculate(id) 
 
{ 
 
    var list = document.getElementsByClassName("options"); 
 
    for (var i = 0; i < list.length; i++) { 
 
     list[i].style.background = ''; 
 
    } 
 
    document.getElementById(id).style.background = '#d1d1d1'; 
 
}

.options:hover { 
 
\t background:#d1d1d1; 
 
}

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly> 
 
    
 
<input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="Calculate(this.id)" readonly><br><br>

來源

2015-05-08 10:51:35 Pete

JavaScript禁用外部CSS的效果？

回答

相關問題