classList属性

脚本化CSS类-HTML5 classList属性

HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设置和清除元素的className属性来为元素添加或移除attention类 function grabAttention(e){e.className="attention";} function releaseAttention(e){e.className="";}…

HTML5实战与剖析之classList属性

classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名li.meng和long,三个类名中的类名meng删除.代码如下 HTML代码 1.<div class="li meng long">梦龙小站</div> JavaScript代码 01.//获取要删除类名meng的div 02.var div = docume…

1.传统方法: 在操作类名的时候,需要通过className属性添加.删除和替换类名.如下面例子: ? 1 <div class="bd user disabled">...</div> 这个div中一共有三个类名,要从中删掉一个类名,需要把这三个类分别拆开,然后进行处理,处理过程如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> …

classList属性详解

之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类.该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改. 支持classList属性的浏览器版本: 语法:element.classList 方法: add(class1, class2, ...): 在元素中添加一个或多个类名, 如果指…

classList属性和className的区别

className的不方便之处: 在操作类名时,需要通过className属性添加,删除和替换类名.因为className中是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值.(如下所示:) html部分但是!!!classList却极为方便!!!所以classList诞生了... ●classList属性:这个属性是新集合类型DOMTokenList的实例.其包含以下属性和方法: ->length ->item()(也可以用方括号语法):取得每个元素 -&…

html元素是否包含另外一个元素，以及classList属性

如何判断一个元素A包含了元素B呢?如果不用contains方法的话,如何做呢? 腾讯面试的时候也出了这道题啊,当时没看dom的知识,所以一抹黑哦... 那就判断B是否为A的child喽,那也就是A是B的parent或者parent.parent或者parentNode.parentNode.parentNode.... 所以就这样向上遍历一下B的父亲节点,看A是不是在这个父节点链上.代码如下: function isAContainsB(B,A){ var node = B.parnetNode…

给IE9及其以下等不支持classList属性的浏览器,添加classList属性

// 解决IE9及其以下不支持classList属性的问题 if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function() { var self = this; function update(fn) { return function(value) { var classes = self.cla…

HTML5新特性:元素的classList属性与应用

在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分 gQuery.prototype.hasClass = function (ob…

HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla…

DOM 的classList 属性

1.添加1个或多个class add(class1, class2, ...) 2.移除class remove(class1, class2, ...) 3.判断指定的类名是否存在 contains(class)true - 元素包已经包含了该类名false - 元素中不存在该类名 4.在元素中切换类名. toggle(class, true|false)第一个参数为要在元素中移除的类名,并返回 false.如果该类名不存在则会在元素中添加类名,并返回 true. 第二个是可选参数,是个布尔值…

关于classList的API

<body class="a b c"> ...... </body> document.body.classList可以取得body的classList属性 classList属性和方法有: length 表示类的数量长度 add([string]) 增加类 remove([string]) 移除某类 toggle([string]) 有的话移除此类,没有的话加上此类 contains([string]) 判断是否包括某类,支持一个字符串 item() 支持一…

classLIST元素增删改查方法

window.onload=function () { var oDiv=document.getElementsByTagName('div')[0]; var oInP=document.getElementsByTagName('input')[0]; var aDiv=new classList(oDiv); oInP.onclick=function(){ aDiv.add('ha'); alert(oDiv.className); }}/*如果e有classList属性则返回它,否则…

第二十课：js中如何操作元素的属性系统

本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性拥有默认值,并且无法删除.自定义属性是用户随意添加的键值对.浏览器提供一组API来供人们操作自定义属性,即:setAttribute,getAttribute,removeAttribute,我们统称这组API为DOM属性系统. DOM属性系统对属性名会进行小写处理,属性值会统一转字符串,举个例子:…

dom classList

才发现dom对象就有classList属性,通过它可以判断该dom是否有指定的class名存在. var tar = e.target; var classList = tar.classList; classList.contains("feestandardCancel")…

兼容性记录-class属性

getAttribute获得class属性时,IE6,IE7的传參是className,IE7+和现代游览器都是class 全部游览器DOMElement均有的className属性,其在IE各版本号下的均表现良好返回属性class值的字符串此外html5中DOMElement有个classList属性,它返回一个类型为DOMTokenList的对象,它当中有非常多实用操作class的方法. 能够写一个通用的hasClass方法 function hasClass(n, cls) { …

js设置元素class方法小结及classList相关

给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法一.el.setAttribute('class','abc'); var div = document.getElementById('d1'); div.setAttribute("class", "abc"); 兼容:IE8/9/10/Firefox/Safari/Chrome/…

对JS 的classList 简单记录

一对classList整体感觉浏览器支持参考(http://www.runoob.com/jsref/prop-element-classlist.html) classList 是一个对象 ,返回值:一个 DOMTokenList, 包含元素的类名列表语法:element.classList 有一个属性 length 只读方法: 1.add(class1, class2, ...) 在元素中添加一个或多个类名. 如果指定的类名已存在,则不会添加 2.remove(class1, cl…

学习前端的菜鸡对JS 的classList理解

classList 在早期的时候要添加,删除类需要用className去获取,然后通过正则表达式去判断这个类是否存在. 代码上去会有点麻烦,现在有了classList 就方便了很多. ———————————————————————————————————————————————————— 定义和用法 classList 属性返回元素的类名,作为 DOMTokenList 对象. 该属性用于在元素中添加,移除及切换 CSS 类. classList 属性是只读的,但你可以使用 add() 和 r…

classlist和array.prototype.slice.call

1.classlist document.getElementById("myDIV").classList.add("mystyle"); classList 属性返回元素的类名,作为 DOMTokenList 对象. 该属性用于在元素中添加,移除及切换 CSS 类. classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它. 返回值:一个 DOMTokenList, 包含元素的类名列表方法描述 add(class1, cl…

html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 contains(value) 判断是否存在类名,返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名:如果列表中存在则删除,否则添加为了更好的兼容性,我们可以自己手动实现这几个方法. 这里利用了DOM属性 className,我们始终是在操作这个…

全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 : classList 属性是新集合类型 DOMTokenList 的实例.DOMTokenList 类型有一个lenght 属性 ,表示包括了多少子元素,要取得每个元素能够通过item() 方法訪问.也能够用 [ ] 方法訪问. 此外这个…

使用classList来实现两个按钮样式的切换

classList属性的方法:add();remove();toggle(); 描述,在一些页面我们需要使用两个按钮来回切换,如图: 我们要使用到add()和remove()方法 html部分: <div class="login-title"> <a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()"…

分别使用原生js和jQuery添加/删除元素的class属性

一.原生js添加/删除元素的class属性:  <span class="test"></span> // 获取元素 var ele = document.getElementsByClassName("abc"); // 方法1:直接赋值,会覆盖原有的值 ele.className = "test1"; <!-- clas…

使用 classList API

一.classList API 是什么属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时"地代表了元素的类名集合. classList 对象上定义了 6 个实用的操作 class 属性值的方法. 二.classList 对象上的属性和方法属性: length:返回当前类列表中类的个数. 方法: add(class1, class2, ...):添加类 remove(class1, clas…

js-classList修改class属性

classList定义与用法 1)classList属性返回元素的类名,作为DOMTokenList对象 2)该属性用于在元素中添加,移除及切换css类 3)classList属性是只读的,但可以用add()和remove()方法修改他. 方法: 1.添加class属性--add() 方法:add(class1,class2,...) 描述:1.在元素中添加一个或多个类名:2.如果指定的类名已存在,则不会添加 1).增加一个class document.getElementById("p&quo…

【classList属性】的更多相关文章