- 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費(fèi)，如需要項(xiàng)目實(shí)戰(zhàn)或者是體系化資源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗(yàn), 從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔(dān)任研發(fā)部門CTO。
- 榮譽(yù)：2022年度博客之星Top4、2023年度超級個(gè)體得主、谷歌與亞馬遜開發(fā)者大會特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。
- ?? 白寶書系列
- ?? 啟示錄 - 攻城獅的自我修養(yǎng)
- ?? Python全棧白寶書
- ?? ChatGPT實(shí)踐指南白寶書
- ?? 產(chǎn)品思維訓(xùn)練白寶書
- ?? 全域運(yùn)營實(shí)戰(zhàn)白寶書
- ?? 大前端全棧架構(gòu)白寶書
? 改變元素節(jié)點(diǎn)的css樣式
改變元素節(jié)點(diǎn)的CSS樣式的語法示例：
oBox.style.backgroundColor = 'red';
oBox.style.backgroundImage = 'url(images/1.png)';
oBox.style.fontSize = '32px';
需要注意的是，屬性的名字要用”駝峰“的形式去寫（因?yàn)閖s中短橫線就是減號，所以不能用短橫線寫）。
所以，想要改變一個(gè)css的屬性值，就用上面的語法形式寫就可以了。
為什么要使用js來改變css的樣式呢？這個(gè)在后面寫到事件監(jiān)聽的時(shí)候會有很大的用處，比如監(jiān)聽到鼠標(biāo)點(diǎn)擊按鈕的事件，就可以利用js改變按鈕的樣式，呈現(xiàn)出很好的動畫效果。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box'); //獲取元素節(jié)點(diǎn)
box.style.backgroundColor = 'green'; //改變背景顏色
box.style.borderRadius = '50%'; //改變圓角
</script>
</body>
</html>
設(shè)置的樣式是通過”行內(nèi)“的形式設(shè)置的：
? 改變元素節(jié)點(diǎn)的HTML屬性
標(biāo)準(zhǔn)W3C屬性，如src、href等等，只需要直接打點(diǎn)進(jìn)行更改即可
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/images/1.jpg" alt="" id="pic">
<a href="https://www.baidu.com/" id="baidu">去百度</a>
<script>
//獲取節(jié)點(diǎn)
var oPic = document.getElementById('pic');
var oLink = document.getElementById('baidu');
//更改HTML屬性
oPic.src = '/images/2.jpg';
oLink.href = 'https://news.baidu.com/';
oLink.innerText = '去百度新聞';
</script>
</body>
</html>
不符合W3C標(biāo)準(zhǔn)的屬性，如data-n等等，需使用
setAttribute()和getAttribute()來設(shè)置、讀取。
setAttribute()設(shè)置屬性值
getAttribute()獲取屬性值不符合W3C標(biāo)準(zhǔn)的屬性是在開發(fā)過程中自定義的，為了在具體的業(yè)務(wù)場景使用，在這里不必糾結(jié)這個(gè)屬性的意義。
示例代碼：
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.setAttribute('data-n', 10); //設(shè)置一個(gè)不符合W3C規(guī)范的屬性
var n = box.getAttribute('data-n'); //獲取一個(gè)不符合W3C規(guī)范的屬性值
alert(n);
</script>
</body>
文章來源：http://www.zghlxwxcb.cn/news/detail-758993.html
? 擴(kuò)展：nodeType常用屬性值
節(jié)點(diǎn)的nodeType屬性可以顯示這個(gè)節(jié)點(diǎn)具體的類型。文章來源地址http://www.zghlxwxcb.cn/news/detail-758993.html
| nodeType | 節(jié)點(diǎn)類型 |
|---|---|
| 1 | 元素節(jié)點(diǎn)，例如<p>和<div>
|
| 3 | 文字節(jié)點(diǎn) |
| 8 | 注釋節(jié)點(diǎn) |
| 9 | document節(jié)點(diǎn) |
| 10 | DT節(jié)點(diǎn) |
到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門三大核心之JS篇?〗- DOM改變元素節(jié)點(diǎn)的css樣式、HTML屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
