HTML5新特性:元素的classList属性与应用
在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分
gQuery.prototype.hasClass = function (obj, cName) {
// <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div>
return obj.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
} gQuery.prototype.addClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (!this.hasClass(this.elements[i], cName)) {
// hello abc // abc
this.elements[i].className += " " + cName;
this.elements[i].className = this.trim(this.elements[i].className);
}
}
return this;
} gQuery.prototype.removeClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (this.hasClass(this.elements[i], cName)) {
var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');
this.elements[i].className = this.elements[i].className.replace(re, " ");
this.elements[i].className = this.trim(this.elements[i].className);
}
}
return this;
} gQuery.prototype.toggleClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (this.hasClass(this.elements[i], cName)) {
this.removeClass(cName);
} else {
this.addClass(cName);
}
}
return this;
}
这里,我还写了一个独立的删除某个class的功能:
<div class="box1 box2 box3">this is a test string</div>
<input type="button" value="移除某个class">
<script>
var oDiv = document.querySelector("div"),
classNames = '',
oBtn = document.querySelector("input");
oBtn.onclick = function(){
classNames = oDiv.className.split(/\s+/);
var pos = -1, i, len;
for( i = 0, len = classNames.length; i < len; i++ ) {
if( classNames[i] == 'box2' ) {
pos = i;
break;
}
}
classNames.splice( i, 1 );
oDiv.className = classNames.join( " " );
} </script>
思路非常的简单,获取div元素中的所有class, 用split 按空格切割,就会得到[box1,box2,box3]这样的数组, 然后遍历判断,是否有box2这个class?
找到之后就把当前数组的索引记下来,最后再用splice把该class从数组删除得到[box1,box3] 然后把数组的每一项用join函数中的空格连接,再赋值
给元素的className.
而在html5中,每个元素都有classList这个属性, classList是一个类数组结构, 提供了4个操作class的方法: add,remove,toggle,contains,
看到这几个英文单词,你已经知道什么意思了吧,尤其对于使用过jquery的朋友
add( 添加class), remove( 删除class), toggle( 切换class) contains( 判断是否包含某个class )
<div id="box" class="box1 box2 box3">this is a test string</div>
<input type="button" value="添加class" id="btn-add">
<input type="button" value="移除class" id="btn-remove">
<input type="button" value="切换class" id="btn-toggle">
<script>
var G = function (id) { return document.querySelector(id); }
var oBtnAdd = G('#btn-add'),
oBtnRemove = G('#btn-remove'),
oBtnToggle = G('#btn-toggle'),
oBox = G('#box');
oBtnAdd.onclick = function(){
oBox.classList.add( 'box4' );
}
oBtnRemove.onclick = function(){
if( oBox.classList.contains('box1') ) {
oBox.classList.remove( 'box1' );
}
}
oBtnToggle.onclick = function(){
oBox.classList.toggle( 'box4' );
}
</script>
HTML5新特性:元素的classList属性与应用的更多相关文章
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
随机推荐
- Web Api 基于Zookeeper的服务注册与发现
安装与差异 Zookeeper安装请参考我上篇文章 http://www.cnblogs.com/woxpp/p/7700368.html 基于Nginx的服务提供和消费 基于zookeeper的服务 ...
- MySQL-Select语句高级应用
1.1 SELECT高级应用 1.1.1 前期准备工作 本次测试使用的是world数据库,由mysql官方提供下载地址: https://dev.mysql.com/doc/index-other.h ...
- 二分PkU3258
<span style="color:#330099;">/* E - 二分 Time Limit:2000MS Memory Limit:65536KB 64bit ...
- SpringMVC上传图片并压缩及剪切demo
/** * */ package com.up.controller; import java.awt.Image; import java.awt.image.BufferedImage; impo ...
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- 浅谈MySQL中的查询优化
mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存)等等.这里的记录的优化技巧更适用于开发人员,都是从网络上收集和自己整 ...
- scrapy爬虫框架setting模块解析
平时写爬虫的时候并不需要设置setting里所有的参数,今天心血来潮,花了点时间查了一下setting模块创建后自动写入的所有参数的含义,记录一下. 模块相关说明信息 # -*- coding: ut ...
- 一起读源码之zookeeper(1) -- 启动分析
从本文开始,不定期分析一个开源项目源代码,起篇从大名鼎鼎的zookeeper开始. 为什么是zk,因为用到zk的场景实在太多了,大部分耳熟能详的分布式系统都有zookeeper的影子,比如hbase, ...
- Natas Wargame Level25 Writeup(头部注入+POST/GET注入)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArsAAAC8CAYAAAB4+WYTAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF
- 如何在Intellij IDEA中拉svn分支?
由于用IDEA时间也不是特别长,对操作svn的一些东西,不是特别熟悉,特此记录一下,以做备忘. 先说下流程: 在IDEA里面对trunk代码拉分支熟悉了,其实很容易, (1)你trunk目录下的得有个 ...