js-DOM-css的className相关
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相关的更多相关文章
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- Yii2的相关学习记录,自定义gii模板和引用vendor中的js、css(四)
上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- IE和firefox火狐在JS、css兼容区别
1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...
- 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- JS DOM(文档对象模型)与BOM(浏览器对象模型)
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?
HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
随机推荐
- 结束线程方法2 Java提供的中断机制
package com.mozq.thread.interrupt; /** * 注意:调用interrupt()方法,并不会结束线程. * 结束线程的语义:需要我们自己使用3个中断方法构建. * * ...
- 洛谷2758(字符串dp)
题目传送 记得这是我初学dp时的一道题 虽说就像LCS一样搞一搞即可 但我还是写挂了qwq #include <cstdio> #include <cstring> #incl ...
- Ionic之$scope 依赖注入报错
在开发Ionic过程中,发现会报在 LoginController 中引用locals报错,具体报错问题: ionic.bundle.js:19526 Error: [$injector:unpr] ...
- 代码中看见一共8个变量参数{SEO,0,0,0,0,0,0,0} 解读!{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}
代码中看见{SEO,0,0,0,0,0,0,0}{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}解读! 举个例子: {GetNew,977,0,23,500,0,0 ...
- AJPFX分享JAVA修饰符详解
1.类的修饰符分为:可访问控制符和非访问控制符两种. 可访问控制符是:公共类修饰符 public 非访问控制符有:抽象类修饰符 abstract :最终类修饰符 final 1 )公共类修饰符 pub ...
- dubbo源码阅读之集群(故障处理策略)
dubbo集群概述 dubbo集群功能的切入点在ReferenceConfig.createProxy方法以及Protocol.refer方法中. 在ReferenceConfig.createPro ...
- 解析没有key的Json
没有key的Json,例如:["http://www.cnblogs.com/Cherry-B/p/4625133.html","http://www.cnblogs.c ...
- (转)ASIC设计中各个阶段需要注意的问题——节选
ASIC 的复杂性不断提高,同时工艺在不断地改进,如何在较短的时间内开发一个稳定的可重用的ASIC芯片的设计,并且一次性流片成功,这需要一个成熟的ASIC 的设计方法和开发流程.本文结合NCveril ...
- SM2-DE
SM2单证书认证 下端 导入根证书以及通用证书[具有签名和加密证书的功能]和远端的证书[获取远端公钥信息] 1.配置证书域 crypto ca identity gernal exit 2.通过复制粘 ...
- 修改完linux bashrc文件之后,如何不重启系统使其生效
修改完后,输入如下命令即可 ##@##:~/ source ~/.bashrc 之后bashrc文件就可以使用! 注: 使用ssh登陆shell的时候,系统不会自动调用.bashrc文件, 只是 ...