原生js查询、添加、删除类
1.添加类
为标签添加一个class的类
如:<div id="box" class="box">内容</div>
document.getElementById('box').classList.add('on');
也可以通过这个方法添加多个类
如:document.getElementById('box').classList.add('on', 'hua', 'liang'); // 添加多个类使用逗号分隔开
2.移除类
移除一个类
如:document.getElementById('box').classList.remove('on');
也可以通过这个方法移除多个类
如:document.getElementById('box').classList.remove('on', 'hua', 'liang'); // 移除多个类使用逗号分隔开
3.查询类
查询是否含有某一个类
如: document.getElementById('box').classList.contains('on'); // 查询到类返回true,查询不到类返回false
方法1.判断class 名是否存在
var aw1 = document.getElementById('huatu');
if(aw1.classList.contains('on') == true){
aw1.classList.remove('on');
aw1.style.margin = '20px auto';
aw1.style.textAlign = 'center';
}else{
aw1.classList.add('on');
aw1.style.width = '100%';
aw1.style.lineHeight = '100px';
aw1.style.background = '#f00';
}
方法2. 判断class 名是否存在
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');
原生js查询、添加、删除类的更多相关文章
- js 查询 添加 删除 练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 原生js动态添加style,添加样式
原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
- 原生Js封装的动画类
算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- Vue+iview实现添加删除类
<style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...
- 原生js封装添加class,删除class
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...
- 原生js动态添加新元素、删除元素方法
1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- python爬虫入门(九)Scrapy框架之数据库保存
豆瓣电影TOP 250爬取-->>>数据保存到MongoDB 豆瓣电影TOP 250网址 要求: 1.爬取豆瓣top 250电影名字.演员列表.评分和简介 2.设置随机UserAge ...
- WebApiClient库支持AOT
1 库简介 WebApiClient是开源在github上的一个http客户端库,内部基于HttpClient开发,只需要定义c#接口(interface),并打上相关特性,即可异步调用http-ap ...
- virsh命令来创建虚拟机
virsh命令来创建虚拟机步骤 (1)生成硬盘镜像文件: 格式:raw或qcow2 # qemu-img create -f raw fdisk.img 10G qemu-img convert re ...
- 关于checkpoint
Ⅰ.Checkpoint 1.1 checkpoint的作用 缩短数据库的回复时间 缓冲池不够用时,将脏页刷到磁盘 重做日志不可用时,刷新脏页 1.2 展开分析 page被缓存在bp中,page在bp ...
- Python模拟登陆万能法-微博|知乎
Python模拟登陆让不少人伤透脑筋,今天奉上一种万能登陆方法.你无须精通HTML,甚至也无须精通Python,但却能让你成功的进行模拟登陆.本文讲的是登陆所有网站的一种方法,并不局限于微博与知乎,仅 ...
- TCP/IP协议——ARP详解
本文主要讲述了ARP的作用.ARP分组格式.ARP高速缓存.免费ARP和代理ARP. 1.学习ARP前要了解的内容 建立TCP连接与ARP的关系 应用接受用户提交的数据,触发TCP建立连接,TCP的第 ...
- composer的安装方法
网上说的方法几乎都不正确,经作者总结,终于知道怎么使用composer的方法.第一,从http://docs.phpcomposer.com/下载安装包:composer.phar 第二,把安装包放在 ...
- 用beego开发服务端应用
用beego开发服务端应用 说明 Quick Start 安装 创建应用 编译运行 打包发布 代码生成 开发文档 目录结构说明 使用配置文件 beego默认参数 路由设置 路由的表述方式 直接设置路由 ...
- ||与&&的返回值
当你准备携带你的配剑杀向江湖的时候,当你准备进入js这门语言的时候,你会遇到很多||与&&的问题.那么对于他们的返回值你知道多少呢? 在此之前我们来聊一个大家都知道的知识:js中值转换 ...
- 计算机17-1,2作业D
D.环形矩阵 Description 给定一个整数m,按m形成一个环形矩阵.如m=5,则环形矩阵为: 1 1 1 1 1 1 1 1 1 1 2 2 ...