原生主要有三种方法:

1、className

var DomClass = document.getElementById("id").className;
//删除 pat
DomClass = DomClass.replace('pat',"");
document.getElementById("id").className = DomClass; //添加 pad
DomClass = DomClass.concat('pat');
document.getElementById("id").className = DomClass; //替换 pad
DomClass = DomClass.replace('pat',"pad");
document.getElementById("id").className = DomClass;

2、es5的classList

var DomClass = document.getElementById("id");
//删除 pat
DomClass.classList.remove("pat"); //添加 pad
DomClass.classList.add("pat");

3、同一 setAttribute

var DomClass = document.getElementById("id").getAttribute('class');
//删除 pat
DomClass = DomClass.replace('pat',"");
document.getElementById("id").setAttribute('class',DomClass); //添加 pad
DomClass = DomClass.concat('pat');
document.getElementById("id").setAttribute('class',DomClass); //替换 pad
DomClass = DomClass.replace('pat',"pad");
document.getElementById("id").setAttribute('class',DomClass);

@

js添加和删除class的更多相关文章

  1. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  2. 用JS添加和删除class类名

    下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"): 删除:节点.classList.remove("类名") ...

  3. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  4. 电力项目十七--数据字典首页JS添加和删除表格

    知识点:jQuery是一个JavaScript函数库. JS代码: function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); ...

  5. js添加确认删除操作注意事项

    function delsure(){ if(confirm('确认删除吗?')){ return true;//点击确定则返回这里的内容 }else{ return false; } } 在表单中添 ...

  6. js添加、删除Cookie

    //cookie function addCookie(objName, objValue, objHours) { //添加cookie var str = objName + "=&qu ...

  7. 04-THREE.JS 添加、删除物体,批量操作

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  8. JS添加和删除表格行

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 原生JS添加类名 删除类名

    为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...

随机推荐

  1. Oracle 升级的必要性

    一.Oracle 历史 Oracle database 作为Oracle 公司的商业产品,凭借其稳定性和运行高效占据了全球三成以上的市场.并且主要是金融.政府等领域. Oracle 数据库拥有近40年 ...

  2. Punycode

    Punycode是一个根据RFC 3492标准而制定的编码系统,主要用于把域名从地方语言所采用的Unicode编码转换成为可用于DNS系统的编码 “中文域名”不被标准的解析服务器支持,需转化为Puny ...

  3. python数据类型一:字符串

    Python 字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.例如: var1 = 'Hello W ...

  4. jquery源码解析日常

    介绍:JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Op ...

  5. 如何在webpack中成功引用到图片?

    打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...

  6. 潭州课堂25班:Ph201805201 tornado 项目 第九课 深入应用 WebSockets(课堂笔记)

    tornado 相关说明 在 handler 中创建一个  chat.py 文件,用来处理聊天室 在 templates 模板文件夹下创建 room.html 文件,是个聊天室 做好服务器的准备

  7. day9面向对象,多线程2

    一.获取全部qq成员头像 import os,requests,pymongo class Qqgroup(object):#定义一个类 #定义获取QQ群的请求rul,抓包获取 group_rul = ...

  8. NOIP-质因数分解

    题目描述 已知正整数n是两个不同的质数的乘积,试求出较大的那个质数. 输入描述: 输入只有一行,包含一个正整数n. 输出描述: 输出只有一行,包含一个正整数p,即较大的那个质数. #include&l ...

  9. [LeetCode] Serialize and Deserialize N-ary Tree N叉搜索树的序列化和去序列化

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  10. 反射RelectionDemo

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...