html中js添加或删除activex,JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）...-CSDN博客

var box = document.getElementById("box");

box.id = "pox";

将id = “box”，改为id = “pox”；

但id = “box”依然存在，这样就不符合W3C标准。不建议使用。

box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类。

如果想有用className避免这种缺陷，可以写成 box.className ="box5 box6 ....",但是这种方法太过麻烦，会造成冗余，因此可以用下面的方法：

原生的js中并没有添加/删除类这些属性或方法，为了实现这一功能，因此写出了一下两个函数：

1.js原生的addClass()

首先判断是否有要添加的类名:

function hasClass(element, cName){

return !!element.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));

}

判断后，如果没有则添加

function addClass(element, cName){

if (!hasClass(element, cName)) {

return element.className += " " + cName;

};

}

addClass(box,"box6");

addClass(box,"box7");

此时的addClass()添加的类并不会覆盖掉原来的类，减少了冗余。

2.从多个类中删除一个元素 removeClass,其余类保留：

function removeClass(element,cName){

if (hasClass(element,cName)) {

element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), " ");

};

}

removeClass(box,"box6"); //test,box,box7

JS&colon;操作样式表3：内联和外链样式

var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

JS&colon;操作样式表1：行内样式

//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

[荐]使用Js操作注册表

使用Js操作注册表要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...

JS 操作样式 style

1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

操作样式表在JS中样式表用一种类型来表示,以便我们在JS对其进行操作这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表其中 ...

DOM操作样式表及其兼容性

DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...

JavaScript编程：使用DOM操作样式表

6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...

js进阶 9-11 select选项框如何动态添加和删除元素

js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

js修改样式表规则

adasfsfs

adasfs ...

随机推荐

Android中的requestWindowFeature

朋友推荐使用博客记录工作中的难点以及常犯的错误,仅作为笔记,首先整理之前的工作日志. requestWindowFeature(featrueId),它的功能是启用窗体的扩展特性: 注意:该方法必须放 ...

Oracle循环语句

PL/SQL有四种类型的循环:简单循环.WHILE循环.FOR循环以及游标FOR循环.在这里我们主要讨论前三种,除此之外,还将讨论Oracle 11g中新引入的CONTINUE语句. 一. 简单循环 ...

SQL Server 2014新特性——基数评估(白皮书阅读笔记)

基数评估目录基数评估说明基数评估准确的重要性模型假设启用新的基数评估验证基数评估的版本在迁移到新的基数评估前要测试校验基数评估偏差问题需要手动处理的变化避免因为新的CE造成性能 ...

Ubuntu下postgresql安装

第一步:在Ubuntu下安装Postgresql 1.使用 apt-get install 安装 zhang@ubuntu:~/protgresql#sudo apt ...

Entity Framework走马观花之把握全局

在深入学习某项技术之前,应该努力形成对此技术的总体印象,并了解其基本原理,本文的目的就在于此. 一.理解EF数据模型 EF本质上是一个ORM框架,它需要把对象映射到底层数据库中的表,为此,它使用了三个 ...

vue和mvvm的一些小区别

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...

MySql的简单数据类型区别与认识

date 3字节,日期,格式:2014-09-18time 3字节,时间,格式:08:42:30datetime 8字节,日期时间,格式:2014-09-18 08:42:30 ...

BZOJ1991 &colon; Pku2422 The Wolves and the Sheep

将每个不是障碍的格子标号,设三只狼的位置分别为$A,B,C$,羊的位置在$D$.合法状态中强行限制$A

docker cmd list

436 wget -qO- https://get.docker.com/ | sh 437 sudo apt-get update 438 sudo apt-get install -y docke ...

Android直连SQL Server数据库

1. 下载jtds,一个开放源代码的Java实现的JDBC驱动,地址:http://sourceforge.net/projects/jtds/ 2. 添加jtds到当前Android项目中,本人使用 ...