H5 学习笔记（day02-1）HTML DOM classList属性

最新推荐文章于 2022-07-19 16:23:50 发布

DragonLoveYQ

最新推荐文章于 2022-07-19 16:23:50 发布

阅读量208

点赞数

分类专栏：个人学习文章标签： js

本文链接：https://blog.csdn.net/DragonLoveYQ/article/details/109962434

版权

个人学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

classList属性

定义和用法

classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但可以使用 add() 和 remove() 等等方法修改它。

语法

element.classList

属性	描述
length	返回类列表中类的数量该属性是只读的

方法	描述
add(class1, class2, …)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。 true - 类名存在： false - 类名不存在
remove(class1, class2, …)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true/false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: ele.classList.toggle(“class1”, false); 添加一个 class: ele.classList.toggle(“class1”, true);
replace(class1,class2)	替换元素中的类名。替换不存在的类名，不会报错也发生任何改变。
item(index)	返回元素中索引值对应的类名。找不到返回 null。

注意：toggle(class, true/false) 在 Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

<style>
    * {margin: 0;padding: 0;}span{float: left;margin-left:50px;padding-top: 50px;}
    div {width: 100px;height: 100px;border: 1px solid #333;transition: 1s;}
    .jia_width{width: 200px;}
    .jia_height{ height: 200px;}
    .f90{background:#f90;}
    .f09{background:#f09;}
    .f32{background:#f32}
    .ff1{background:#ff1}
    .f7f{background:#f7f}
</style>
<body>
    <p>例子：ele.classList.add() </p>
    
    <span>add()添加class 放大盒子
        <div></div>
        <input type="button" value="添加">
    </span>
    
    <span>contains() 判断clss  存不存在
        <div></div>
        <input type="button" value="判断">
    </span>
    
    <span>remove() 删除class 清除背景颜色
        <div class="f09"></div>
        <input type="button" value="删除">
    </span>
    
    <span> length 长度
        <div></div>
        <input type="button" value="查看有多少个类名">
    </span>
    
    <span>toggle() class名字 存在就删除/ 不存在就添加
        <div></div>
        <input type="button" value="添加/删除背景颜色">
    </span>
    
    <span>replace() 替换(old ， new)
        <div class="ff1"></div>
        <input type="button" value="替换">
    </span>
    
	<span>item(index) 查看对应下标类名
	      <div class="zero one two three four 		five"></div>
	      <input type="button" value="查看">
	</span>
	
    <script>
        var btn = document.getElementsByTagName('input')
        var box = document.getElementsByTagName('div')

        //添加类名  ele.classList.add(value)
        btn[0].addEventListener('click', function () {
            // box[0].classList.add('enlarge') //添加calss名
            box[0].classList.add('jia_width' , 'jia_height') //添加多个calss名
            console.log( box[0].classList)
            //DOMTokenList(2) ["jia_width", "jia_height", value: "jia_width jia_height"]
        })

        //判断类名是否存在  ele.classList.contains(value)
        btn[1].onclick = function () {
            alert(box[1].classList.contains('f90') ? '存在':'不存在' )
        }

        //删除类名 ele.classList.remove(value)
        btn[2].onclick = function () { 
            box[2].classList.remove('f09')
            // box[2].classList.remove('xx','xx') 与添加一样可以删除多个
        }
        
        //类名数量  ele.classList.length
        btn[3].onclick = function () {
            alert( btn[3].classList.length)
        }

        //添加与删除类名 ele.classList.toggle(value)  有类名就删除没有就添加
        btn[4].onclick = function () {
            box[4].classList.toggle('f32')
        }

        //替换背景颜色 ele.classList.replace(oldValue,newValue)
        btn[5].onclick = function () { 
            box[5].classList.replace('ff1', 'f7f')
        }
        
        //查看所对应下标的类名 ele.classList.item(index)
        btn[6].onclick = function () { 
              alert('class[zero one two three four five]我输入是下标二对应类名是'+box[6].classList.item(2))   
        }
    </script>

DragonLoveYQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 学习笔记（day02-1）HTML DOM classList属性

classList属性定义和用法classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但可以使用 add() 和 remove() 等等方法修改它。语法element.classList属性描述length返回类列表中类的数量该属性是只读的方法描述add(class1, class2, …)在元素中添加一个或多个类名
复制链接

扫一扫