快捷導(dǎo)航

原生Javascript/原生JS修改CSS樣式的4種方式簡(jiǎn)單示例

更新時(shí)間：2024年03月25日 10:36:52 作者：星河_趙梓宇

在網(wǎng)頁(yè)開(kāi)發(fā)中我們經(jīng)常會(huì)用到JavaScript來(lái)操作網(wǎng)頁(yè)元素,其中一個(gè)常見(jiàn)的操作就是修改元素的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于原生Javascript/原生JS修改CSS樣式的4種方式,需要的朋友可以參考下

設(shè)置style

var domName = document.querySelector('#domName');
domName.style.backgroundColor = '#aaa'

設(shè)置屬性setAttribute

var domName = document.querySelector('#domName');
domName.setAttribute('style', 'background: #000;')

設(shè)置cssText

var domName = document.querySelector('#domName');
domName.style.cssText = 'background:#000; margin:0px 2px;'

設(shè)置class

重寫(xiě)className以修改CSS樣式

var domName = document.querySelector('#domName');
domName.className = 'red';

另外通過(guò)classList已修改CSS樣式，可以避免class被覆蓋

var bottom = document.querySelector('#bottom');
bottom.classList.add(className); // 添加一個(gè)類(lèi)名
bottom.classList.remove(className); // 移除一個(gè)類(lèi)名
bottom.classList.add('red')

附：JS修改CSS的實(shí)例代碼

需求

點(diǎn)按鈕，修改p標(biāo)簽的字體、顏色、大小

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操縱Css</title>
<style type="text/css">
    .two{
        color: rebeccapurple;
        font-size: 45px;
        font-family: "BIZ UDP明朝 Medium";
    }
</style>
</head>
<script type="text/javascript">
    //方式一：修改多個(gè)樣式屬性
    function changeCss () {
//color: blue; font‐size: 30px; font‐family: 楷體;
//得到first這個(gè)p
        var p1 = document.getElementById("first");
//語(yǔ)法：元素.style.樣式名=樣式值;
        p1.style.color = "blue";
        p1.style.fontSize = "30px";
        p1.style.fontFamily = "楷體";
    }
    //方式二：首先創(chuàng)建一個(gè)類(lèi)樣式，然后一條語(yǔ)句一次性修改所有的樣式
    function changeClass () {
        var p2 = document.getElementById("second");
//語(yǔ)法：元素.className = "類(lèi)名";
        p2.className = "two";
    }
</script>
<body>
<p id="first">
    元素.style.樣式名 = "樣式值";
</p>
<p id="second">
    元素.className = "類(lèi)名";
</p>
<input type="button" value="style.樣式名,修改多個(gè)樣式屬性" onclick="changeCss()"/>
<input type="button" value="className,改變類(lèi)樣式" onclick="changeClass()"/>
</body>
</html>