原生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库
--Python库之Pandas库-------- 自主选择学习了Python中的Pandas库,以下是本人对Pandas库的认识: Pandas库是Python最受欢迎的库之一,主要用于数据的操作. ...
- git基础命令学习总结
git版本升级 git clone git://git.kernel.org/pub/scm/git/git.git 列出所有 Git 当时能找到的配置 git config --list git c ...
- Python(2)深入Python函数定义
Python学习 Part2:深入Python函数定义 在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用: 1. 默认参数 最常用的一种形式是为一个或多个参数指定默认 ...
- python字符串基本编码
综述:python中字符串分为字节字符和非字节字符python3中默认输入字符串以非字节字符编码,使用unicode字符集表示,可以使用encode方法转化为ascii,utf-8, utf-16等各 ...
- mysql由于权限问题看不到用户数据库
一.登录数据库 [root@localhost ~]# mysql -u root mysql > show databases; +--------------------+| Databas ...
- 使用jmeter 进行接口的性能测试
1.启动jmeter:在bin下以管理员身份运行jmeter.bat,启动jmeter 2. 创建测试计划: 默认启动jmeter时会加载一个测试技术模板,保存测试计划:修改名称为Apitest,点击 ...
- PHP之连接mysql小练习
mysql Test.sql 1 -- phpMyAdmin SQL Dump -- version 4.6.6 -- https://www.phpmyadmin.net/ -- -- Host: ...
- PCA的数学原理(转)
PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...
- 这样入门asp.net core 之 静态文件
本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务 首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...
- bootstrap学习地址2017.6.1
http://www.runoob.com/bootstrap/bootstrap-tutorial.html