1、在非标准的浏览器,IE8及以下的浏览器不支持className的操作,包括getElementByClassName,addClassName,removeClassName;

 2、getElementByClassName处理兼容的方法:

  

var aLi=getElementByClassName(document,'box');//如果多一个限制元素范围的形式为:getElementByClassName(document,'box','li');

function getElementByClassName(parent,className){//parent指在该范围下来选取节点,className指要获取的className名字
var aEls=parent.getElementByTagName('*');//获取页面所有元素,也可以通过传参的方式将“*”替换为想要的元素范围。比如想要获取className为box的所有li元素,就需要将“*”改为li,将传参部分多增加一个tagName,传给tagName的参数为li。
//getElementByClassName(parent,className,tagName);
//var aEls=parent.getElementByTagName(tagName); var arr=[];
for(var i=0;i<aEls.length;i++){
var aClassName=aEls[i].className.split(' ');
for(var j=0;j<aClassName.length;j++){ if(aClassName[j]==className){
arr.push(aEls[i]);
break;
}
}
}
  return arr;
}

3、添加className的方法:addClass()

 function addClass(obj,className){
if(obj.className==''){
//如果原来没有className
obj.className=className;
}else{
// 如果有className
//如果要添加的className在原来的className中不存在
var arrClassName=obj.className.split(' ');
var index=arrIndexOf(arrClassName,className);
if(index==-1){
obj.className+=' '+className;
}
}
//如果要添加的className在原来的className中存在,则不用再添加了 }
function arrIndexOf(arrClassName ,className){
for(var i=0;i<arrClassName.length;i++){
if(a[i]==className){
return i;
}
}
return -1;
}

4、删除className的方法:removeClass

function removeClass(obj,className){
//如果原来有class
if( obj.className!=''){
var arrClassName=obj.className.split(' ');
var index=arrIndexOf(arrClassName.className);
//如果有要移除的class
if(index!=-1){
arrClassName.splice(index,1);
obj.className=arrClassName.join(' ');
}
//如果没有要移除的class则不用进行操作
}
}
function arrIndexOf(arrClassName ,className){
for(var i=0;i<arrClassName.length;i++){
if(a[i]==className){
return i;
}
}
return -1;
}

js-DOM-css的className相关的更多相关文章

  1. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  2. Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四)

    上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...

  3. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  4. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  5. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

  6. 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  7. JS DOM(文档对象模型)与BOM(浏览器对象模型)

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

  8. 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?

    HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  9. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  10. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

随机推荐

  1. Mysql 开启 Slow 慢查询

    1:登录数据库查看是否已经开启了Slow慢查询: mysql> show variables like 'slow_query%'; 2:开启Mysql slow日志: 默认情况下slow_qu ...

  2. php—常见设计模式

    工厂模式 /** * 工厂方法或者类生成对象,而不是在代码中直接new * * 修改类名的时候,不需要每一个实例化语句都修改 * 只需要修改对应的工厂方法 * * Class Factory * @p ...

  3. 【bzoj1718】Redundant Paths 分离的路径

    1718: [Usaco2006 Jan] Redundant Paths 分离的路径 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 964  Solve ...

  4. siege官方文档(译)(一)

    WHAT IS siege? Siege is an open source regression test and benchmark utility. Siege是一款开源回归测试和基准测试工具. ...

  5. gem install 提示rubygems.org连接不上的问题

    周五的时候安装compass时遇到的,总是报错,后来反应过来是被墙了.解决办法就是使用淘宝的rubygem的镜像 gem sources --remove https://rubygems.org/ ...

  6. 左右两个Select列表框交换数据的JS

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  7. vue.js2.0实战填坑记录

    访https://github.com/bailicangdu/vue2-elm的PC商城 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化 ...

  8. Eclipse下对MAVEN进行junit软件测试

    一.Maven project management and build automation tool, more and more developers use it to manage the ...

  9. restful十项规范

    1.协议 API与用户的通信都是通过HTTPS协议进行的 2.域名 应尽量将API部署在专有域名下:https://api.example.com 如果确定API很简单,不会有什么扩展,则可以放在主域 ...

  10. codevs 1097 校门外的树 2005年NOIP全国联赛普及组 (线段树)

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可 ...