原生js操作元素類名(classList,classList.add...)

1、classList
classList屬性是一個只讀屬性，返回元素的類名，作為一個DOMTokenList集合(用于在元素中添加，移除及切換css類)

length:返回類列表中類的數量，該屬性是只讀的

? ? .box {
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? border: 1px solid #e15671;
? ? }
? ? .red {
? ? ? ? background: red;
? ? }
? ? .width {
? ? ? ? width: 200px;
? ? }
</style>
<body>
? ? <ul>
? ? ? ? <li class="lis red width">111</li>
? ? </ul>
? ? <div class="box"></div>
</body>
<script>
? ? let box = document.querySelector('.box');
? ? let list = box.classList;
? ? console.log(list.length);//1
? ? console.log(list);//DOMTokenList ['box', value: 'box']

? ? let lists = document.querySelector(".lis");
? ? let len = lists.classList;
? ? console.info(len.length);//3
? ? console.info(len);//DOMTokenList(3) ['lis', 'red', 'width', value: 'lis red width']

</script>
?

2、classList.add(className1,className2…);
添加一個或多個類名，如果指定的類名存在，則不添加

?? ?<style>
?? ??? ?.mystyle {
?? ??? ??? ?width: 300px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background-color: skyblue;
?? ??? ??? ?color: white;
?? ??? ??? ?font-size: 25px;
?? ??? ?}
?? ??? ?
? ? ? ? ? ?.once{
?? ??? ??? ?padding: 20px;
?? ??? ??? ?border: 2px solid orange;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<button οnclick="myFun()">點我</button>
?? ??? ?<div id="boss">
?? ??? ??? ?我是一個 div
?? ??? ?</div>
?? ?</body>
?? ?<script>
? ? ? ? //添加一個類樣式
?? ??? ?function myFun() {
?? ??? ??? ?let divCla = document.getElementById("boss");
?? ??? ??? ?let style = divCla.classList.add("mystyle");
?? ??? ?}
? ? ? ??
? ? ? ? //添加兩個及兩個以上類樣式類名用逗號','隔開
? ? ? ? function myFun() {
?? ??? ??? ?let divCla = document.getElementById("boss");
?? ??? ??? ?let style = divCla.classList.add("mystyle","once");
?? ??? ?}
?? ?</script>
?

3、classList.contains(className);
判斷指定的類名是否存在，返回布爾值(true:存在；false:不存在)

?? ?<style>
?? ??? ?.lis {
?? ??? ??? ?width: 200px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?background-color: skyblue;
?? ??? ?}
?? ??? ?.red {
?? ??? ??? ?background: red;
?? ??? ?}

?? ??? ?.width {
?? ??? ??? ?width: 200px;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li class="lis red width">111</li>
?? ??? ?</ul>
?? ?</body>
?? ?<script>
? ? ? ? let lis = document.getElementsByClassName("lis")[0];
? ? ? ? let style = lis.classList.contains('red');
? ? ? ? console.log(style);//true 存在類名

? ? ? ? let style1 = lis.classList.contains('height');
? ? ? ? console.log(style1);//false
?? ?</script>

4、classList.item(index);
返回索引值對應的類名 [索引值在區間范圍外返回null]

?? ?<style>
?? ??? ?.lis {
?? ??? ??? ?width: 200px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?background-color: skyblue;
?? ??? ?}
?? ??? ?.red {
?? ??? ??? ?background: red;
?? ??? ?}
?? ??? ?.width {
?? ??? ??? ?width: 200px;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li class="lis red width">111</li>
?? ??? ?</ul>
?? ?</body>
?? ?<script>
? ? ? ? //第一個類名根據索引查詢
? ? ? ? let lis = document.getElementsByClassName("lis")[0];
? ? ? ? let className = lis.classList.item(0);
? ? ? ? console.log(className);//lis
? ? ? ? //第二個類名
? ? ? ? let className2 = lis.classList.item(1);
? ? ? ? console.log(className2);//red
?? ??? ??? ?
?? ?</script>
?

5、classList.remove(className1,className2…);
移除一個或多個類名 [移除不存在的類名，不會報錯]

?? ?<style>
?? ??? ?.mystyle {
?? ??? ??? ?width: 300px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background-color: skyblue;
?? ??? ??? ?color: white;
?? ??? ??? ?font-size: 25px;
?? ??? ?}
?? ??? ?
?? ??? ?.once{
?? ??? ??? ?padding: 20px;
?? ??? ??? ?border: 2px solid orange;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<button οnclick="myFun()">點我</button>
?? ??? ?<div id="boss" class="mystyle">
?? ??? ??? ?我是一個 div
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?function myFun() {
?? ??? ??? ?let box = document.querySelector('#boss');
?? ??? ??? ?let list = box.classList.remove("mystyle");
? ? ? ? ? ??
? ? ? ? ? ? // 移除不存在的類名不會報錯
? ? ? ? ? ? //let box = document.querySelector('#boss');
?? ??? ??? ?//let list = box.classList.remove("once");
?? ??? ?}

?? ?</script>
?

6、classList.toggle(className[, true | false]);
切換類名；

第一個參數為要移除的類名，并返回false；若該參數不存在則添加類名，返回true

第二個參數為布爾值，設置是否強制添加或移除類，不論類名是否存在

?? ?<style>
?? ??? ?.mystyle {
?? ??? ??? ?width: 300px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background-color: skyblue;
?? ??? ??? ?color: white;
?? ??? ??? ?font-size: 25px;
?? ??? ?}
?? ??? ?.box {
?? ??? ??? ?width: 100px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?border: 1px solid #e15671;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<button οnclick="myFun()">點我</button>
?? ??? ?<div id="boss" class="mystyle">
?? ??? ??? ?我是一個 div
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?function myFun() {
?? ??? ??? ?//添加類名
?? ??? ??? ?let box = document.querySelector('#boss');
?? ??? ??? ?let list = box.classList.toggle("box");
? ? ? ? ? ? //給兩個值的時候
? ? ? ? ? ? //移除類名
?? ??? ??? ?let removeList = box.classList.toggle('mystyle',false);
?? ??? ??? ?//添加類名
?? ??? ??? ?let addList = box.classList.toggle('box',true);
?? ??? ?}
?? ?</script>

7、classList.replace( oldClassName，newClassName );
替換類名，返回布爾值,true表示替換成功

第一個參數為被替換的類名

第二個參數為要替換的新類名

?? ?<style>
?? ??? ?.mystyle {
?? ??? ??? ?width: 300px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background-color: skyblue;
?? ??? ??? ?color: white;
?? ??? ??? ?font-size: 25px;
?? ??? ?}
?? ??? ?.box {
?? ??? ??? ?width: 100px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?border: 1px solid #e15671;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<button οnclick="myFun()">點我</button>
?? ??? ?<div id="boss" class="mystyle">
?? ??? ??? ?我是一個 div
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?function myFun() {
?? ??? ??? ?let box = document.querySelector('#boss');
?? ??? ??? ?let replace = box.classList.replace('mystyle','box');
?? ??? ?}
? ? ? ??
?? ?</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/908429.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/908429.shtml
英文地址，請注明出處：http://en.pswp.cn/news/908429.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！