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;
               }
        }
      }
}  

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;
}   
时间: 2024-08-24 02:43:15

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

JS——DOM操作(className属性)

简单介绍className: className 属性:设置或返回元素的 class 属性 看下面一个简单的例子(给className设置样式变化案例),效果如下图: 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="

js DOM优化相关探索

我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道. 下面的小例子就说明了问题: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charse

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

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

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

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

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

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none

关于React库的纯JS DOM的单向可视化?

[技术讨论]React库据说是用JS模拟了DOM,其可视化是单向流向的,所以性能比DOM要好(DOM的getComputedStyle或者会触发reflow的style获取?),但这不是意味着这个JS DOM需要实现所有的影响layout的CSS属性设置操作? 如果真的实现了的话,岂不是JS完全重新实现了WebCore layout引擎了 其实DOM的本质也是单向的,并不存在一个单独的UI反馈设备,当设置了元素的CSS属性并经过layout排版后,元素的大小位置都是根据一个模型计算出来的,只不过

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

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

hta+vbs+js+div+css (javascript是原生态的)

talbe是javascript动态生成的,根据你的sql语句来的,分页是vbs用数组来造的轮子,vbs这脚本虽然强大,却没有返回数据集的东东,数组来做简单的分页还是比较简单的,批量跟新呢?是上传execl来更新的,最好是用vba操作execl的话,直接在execl里修改了立马更新数据库,只是个小工具,目前还不是很强大不是很满意,慢慢做,局限hta不能跨平台只能windows,不能和硬件结合.优点调用webservies不需要考虑域的问题,做一个小巧强悍的工具还是比较方便的,因为hta直接双击就