WebAPI中className与classList的区别

className

webapi中通过className更改元素样式

在style标签中重新定义一个新的样式
在js中直接引用：获取的元素.className=’’;

  <style>.box{width: 100px;height: 100px;background-color: pink;}.size{font-size: 30px;}</style>
<body><div class="box">123</div>
</body>
<script>const box= document.querySelector('.box') //获取dom元素box.onclick=function(){this.className='size'}
</script>

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

ClassList

element.classList.add() 增加类
element.classList.remove() 删除类
element.classList.toggle() 切换类
element.classList.contains() 判断是否包含某个类，返回true/false

  <style>.box{width: 100px;height: 100px;background-color: pink;}.size{font-size: 30px;}</style>
</head>
<body><div class="box">123</div>
</body>
<script>const box= document.querySelector('.box') //获取dom元素
box.classList.add('size')
</script>

注意:

classList不会覆盖类名，在原有的类名上添加上另一个类名

WebAPI中className与classList的区别相关推荐

className 与 classList 的区别 / setAttribute和add的区别
className 与 classList 的区别 1,所有浏览器都支持className属性 classList是HTML5新增,对IE浏览器并不友好,IE10+与其他主流浏览器支持此属性. 2,c ...
className和classList区别
js中className和classList区别 box.className = 'active'// add 添加box.classList.add('active')// remove 移除box ...
浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...
html网页访问WebAPI中的方法遇到的问题
1.移动端访问远程服务时,建议使用WebAPI 2.用不同浏览器访问WebAPI时返回的文本格式是不同的,Chrome Firefox将在浏览器中以XML形式显示此列表,IE浏览器将获得Json格式的 ...
python中函数和类的区别_Python中函数和方法的区别
简单总结: 与类和实例无绑定关系的function都属于函数(function): 与类和实例有绑定关系的function都属于方法(method). 首先摒弃错误认知:并不是类中的调用都叫方法函数 ...
DOM中Property与Attribute的区别
property和attribute的汉语翻译几乎相同,都有"属性"的意义(这里姑且称attribute为"特性",以方便区分),而他们的取值也经常相同,但有时 ...
C#中Abstract和Virtual的区别
转自原文 C#中Abstract和Virtual的区别 c# 中 Abstract和Virtual比较容易混淆,都与继承有关,并且涉及override的使用.下面讨论一下二者的区别: 一.Virtua ...
ASP.NET MVC中ApiController与Controller的区别
本文翻译自:Difference between ApiController and Controller in ASP.NET MVC I've been playing around with A ...
ajax的post跟get区别,Ajax中post与get的区别
get和post都是向服务器发送一种请求,只是发送机制不同 . 1. GET可以通过在请求URL上添加请求参数, 而POST请求则是作为HTTP消息的实体内容发送给WEB服务器. 2. get方式请求 ...

WebAPI中className与classList的区别

className

ClassList

WebAPI中className与classList的区别相关推荐

最新文章

热门文章