JS 是一種非常強大的編程語言,除了修改 HTML 元素,還可以很輕松地操作 CSS 樣式。當我們需要修改頁面的布局或樣式時,JS 能夠幫助我們快速實現這些操作。以下是一些常用的 CSS 樣式修改方法。
// 獲取元素樣式 let elem = document.getElementById("myElem"); let elemStyle = window.getComputedStyle(elem); let elemColor = elemStyle.getPropertyValue("color"); // 修改元素樣式 elem.style.backgroundColor = "#FFF"; elem.style.padding = "20px"; elem.style.border = "1px solid #000"; // 添加樣式類 elem.classList.add("my-class"); // 刪除樣式類 elem.classList.remove("my-class"); // 切換樣式類 elem.classList.toggle("my-class");
以上代碼演示了如何獲取元素樣式、修改元素樣式、添加樣式類、刪除樣式類和切換樣式類等操作。
如果你只需要操作單個樣式屬性,可以使用以下方法:
// 獲取元素樣式屬性 let elem = document.getElementById("myElem"); let elemProperty = elem.style.backgroundColor; // 修改元素樣式屬性 elem.style.backgroundColor = "#FFF";
以上代碼演示了如何獲取元素的樣式屬性并修改它。
總之,JS 是一種非常強大的語言,它能夠幫助我們快速地修改頁面布局和樣式。希望這篇文章能夠幫助你更好地理解 JS 中的 CSS 樣式修改。
上一篇js css3圖文
下一篇js css延遲刪除屬性