操作元素樣式
style
●專門用來給元素添加 css 樣式的
●在 JS 內操作元素樣式style的情況分成三種
○設置元素的行內樣式
○獲取元素行內樣式(只能獲取到行內樣式)
○獲取元素非行內樣式(可以獲取行內樣式也可以獲取非行內樣式)
■非行內樣式有內嵌式和外鏈式
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
// <div style="width: 100px; height: 100px; background-color: pink;"></div>
</script>
</body>
●頁面中的 div 就會變成一個寬高都是 100，背景顏色是粉色
操作元素類名
className
●專門用來操作元素的 類名的
●實際上就是操作元素的原生屬性，只不過在js中class是一個關鍵字，所以我們操作原生屬性改用className
獲取
●語法：元素對象.calssName
●返回值：得到的就是元素的完整類名
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box
</script>
</body>
設置
●語法：元素對象.className = '值'
●這樣設置是全覆蓋式的操作，也就是把之前的類名會全部覆蓋掉
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
</script>
</body>
●在設置的時候，不管之前有沒有類名，都會全部被設置的值覆蓋
追加
●語法：元素.className += ' 值'
●注意: 值的位置要書寫一個空格
<!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>
<div class="seal">你好 世界</div>
<script>
var box = document.querySelector('div')
box.className += ' container'
console.log(box);//<div class="seal container">你好 世界</div>
</script>
</body>
</html>
classList
●每一個元素都有一個屬性叫做 classList，是一個類似數組的集合, 里面記錄了元素所有的類名
●classList操作類名有幾種方式：添加，刪除和切換
添加類名
●語法: 元素.classList.add('要添加的類名')
●作用: 給該元素添加一個類名, 但是重復的不會添加進去了
<!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>
<div class="seal">你好 世界</div>
<script>
var box = document.querySelector('div')
console.log(box.classList); //['seal', value: 'seal']
box.classList.add('cls')
console.log(box);//<div class="seal cls">你好 世界</div>
</script>
</body>
</html>
刪除類名
●語法: 元素.classList.remove('要刪除的類名')
●作用: 該該元素刪除一個類名
<!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>
<div class="seal hello">你好 世界</div>
<script>
var box = document.querySelector('div')
box.classList.remove('hello')
console.log(box); //<div class="seal">你好 世界</div>
</script>
</body>
</html>
切換類名
●語法: 元素.classList.toggle('要切換的類名')
●作用: 該元素切換一個類名
●切換: 有就刪除, 沒有就添加
<!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>
<div class="seal hello">你好 世界</div>
<script>
var box = document.querySelector('div')
box.classList.toggle('hello')
box.classList.toggle('world')
console.log(box); //<div class="seal world">你好 世界</div>
</script>
</body>
</html>
操作元素屬性
●元素屬性:書寫在標簽身上, 一個 key=value 的鍵值對, 叫做一條屬性
●通過我們各種獲取元素的方式獲取到頁面中的標簽以后
●我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁面上
屬性的分類
●原生屬性
○在 W3C 規范中提到的屬性, 對標簽有一定的特殊意義或者描述作用
■id, class, src, type, ...
●自定義屬性
○對于標簽沒有特殊的作用或者描述任務, 只是用來在標簽身上記錄一些信息
●H5 自定義屬性
○只是 H5 自定義屬性會以 data- 開頭, 直觀的看出來是自定義屬性
○設置的方式: data-屬性名=屬性值
操作元素屬性
●以下的所有操作屬性的方式和方法, 均不操作 類名(class) 和 樣式(style)
●操作原生屬性
○直接依靠屬性名進行操作
■獲取: 元素.屬性名
●得到的就是該元素指定屬性的值
■設置: 元素.屬性名 = 屬性值
●作用修改該屬性的值
●操作自定義屬性
○獲取:
■語法: 元素.getAttribute(屬性名)
■返回值: 元素中該屬性對應的值
○設置:
■語法: 元素.setAttribute(屬性名, 屬性值)
■作用: 設置或者修改一條自定義屬性
○刪除:
■語法: 元素.removeAttribut(屬性名)
■作用: 刪除元素身上該自定義屬性
●操作H5 自定義屬性
○每一個元素身上自帶一個屬性, 叫做 dataset, 是一個類似于對象的數據結構
○里面記錄的是該元素身上所有的 data- 開頭的自定義屬性
○對于所有 H5 自定義屬性的操作依賴于這個 dataset
○獲取: 元素.dataset.屬性名
○設置: 元素.dataset.屬性名 = 屬性值
○刪除: delete 元素.dataset.屬性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container" class="box" hello="world" data-index="1" data-id="10">123</div>
<!-- <img src="https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg" alt=""> -->
<script>
// 0. 獲取元素
var box = document.querySelector('div')
var img = document.querySelector('img')
// 1. 操作原生屬性
// 1-1. 原生屬性獲取
console.log(box.id)
console.log(img.src)
// 1-2. 原生屬性修改
box.id = 'abcd'
img.src = 'https://img0.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto&gp=0.jpg'
// 2. 自定義屬性
// 2-1. 自定義屬性獲取
var res = box.getAttribute('hello')
console.log(res)
// 2-2. 自定義屬性設置
box.setAttribute('guoxiang', '你好')
box.setAttribute('guoxiang', '世界')
// 2-3. 自定義屬性刪除
box.removeAttribute('hello')
// 3. H5 自定義屬性
// 3-1. 獲取
console.log(box.dataset.index)
// 3-2. 設置
// 在標簽上設置了一個 data-guoxiang="你好"
box.dataset.guoxiang = '你好'
box.dataset.guoxiang = '世界'
// 3-3. 刪除
delete box.dataset.index
</script>
</body>
</html>
案例-密碼可視
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="password"><button>眼睛</button>
<script>
/*
案例 - 密碼可視
+ 當點擊這個 眼睛 按鈕的時候
=> 判斷 input 元素的 type 屬性如果是 password 修改為 text
=> 判斷 input 元素的 type 屬性如果是 text 修改為 password
*/
// 0. 獲取元素
var inp = document.querySelector('input')
var btn = document.querySelector('button')
// 1. 給 btn 綁定點擊事件
btn.onclick = function () {
// 2. 拿到元素現在的 type 屬性的值
var current = inp.type
// 3. 判斷
if (current === 'password') {
// 設置為 text
inp.type = 'text'
} else {
// 設置為 password
inp.type = 'password'
}
}
</script>
</body>
</html>
京公網安備 11010802030320號