如何在不訪問DOM的情況下動態更改樣式？

我有一個具有多個字段的表單，我想根據用戶操作動態更改字段的樣式（邊框）我正在更改當前字段事件處理程序中當前字段和下一個字段的DOM樣式，如下所示任何其他方式不改變DOM和沒有jQuery的動態改變風格？如何在不訪問DOM的情況下動態更改樣式？

document.getElementById("xyz").style.borderColor = "#FFF"; 
document.getElementById("xyz").style.borderWidth = "2px";

來源

2017-04-12 Yasaman Emami

你介意使用jQuery？它會容易得多。 –

您必須改變DOM –

您可以將樣式存儲在CSS中並更改元素上的類名稱...... –

首先設置所有要更改，然後要麼querySelectorAll元素的class或attribute，然後用forEach環路和環路通過選定的標籤變化無論你想要什麼，這都會動態地改變一切。

實施例：

在示例代碼下面我設置一個類.style1上我想選擇那麼將所有元件我querySelectorAll('.style')，通過這些選擇的元素的循環改變className到.style2，這改變邊框顏色從藍色到紅色。

init=()=>{ 
 
\t //SELECT & BIND (CLICK) EVENT 
 
\t var tags = document.querySelectorAll('.style1'); 
 
\t //LOOP THROUGH TAGS WITH CLASS (.style1) AND CHANGE TO (.style2) 
 
\t tags.forEach((o)=>o.className = "style2"); 
 
} 
 
//ON DOCUMENT LOAD RUN INIT 
 
document.addEventListener('DOMContentLoaded',init);

.style1{ 
 
\t border: 1px solid blue; 
 
} 
 
.style2{ 
 
\t border: 1px solid red; 
 
}

\t <form> 
 
\t \t <input type="email" class="style1"> 
 
\t \t <input type="password" class="style1"> 
 
\t \t <textarea class="style1"></textarea> 
 
\t </form>

來源

2017-04-12 20:22:18

你可以玩上課。例如，你可以有這個類設置：

.error { 
    color: red; 
}

，只是使用jQuery，喜歡它適用於不同的元素：

$(this).addClass('error');

這就是我對我自己的項目做。您可以使用JavaScript，但jQuery的使得它更容易和更清潔的:)

來源

2017-04-12 15:19:31

addClass更改DOM –

@AndrewParamoshkin當然，但你必須改變**的東西**，是嗎？ –

它使你更容易，但更難瀏覽器/客戶端... – MarcelD

如何在不訪問DOM的情況下動態更改樣式？

回答

相關問題