如何通过css选取元素以及封装了获取，删除css的相关操作

通过id获取元素再易不过，但通过css获取元素就得自己写函数了。如下

参数一个是父亲元素，一个是要获取的css名，返回的是元素的数组集合，所以要这样用:var a=getByClass(oDiv, 'myDemoCss')[0];

 1 function getByClass(oParent, sClass)
 2 {
 3  var aEles=oParent.getElementsByTagName('*');
 4  var res=[];
 5  var i=0;
 6
 7  for(i=0;i<aEles.length;i++)
 8  {
 9   if(aEles[i].className==sClass)
10   {
11    res.push(aEles[i]);
12   }
13  }
14
15  return res;
16 }

-==============css的相关操作就可以做成如下的函数了

//增加css

1 function addClass(obj,sClass)
2 {
3  if(!getClass(obj,sClass))
4  {
5   obj.className+=" "+sClass;
6  }
7 }

//判断是否存在css 返回boolen

function getClass(obj,sClass)
{var aClass=obj.className.split(" ");for(var i=0;i<aClass.length;i++){if(aClass[i]==sClass){return true;}}return false;
}

//删除css

 1 function removeClass(obj,sClass)
 2 {
 3  var aClass=obj.className.split(" ");
 4  for(var i=0;i<aClass.length;i++)
 5  {
 6   if(aClass[i]==sClass)
 7   {
 8    aClass[i]="";
 9   }
10  }
11  obj.className=aClass.join(" ");
12 }

转载于:https://www.cnblogs.com/thinksley/archive/2012/12/19/2824813.html

如何通过css选取元素以及封装了获取，删除css的相关操作相关推荐

css实现元素/图片上下跳动左右跳动 css动画
代码如下(示例): <divclass="jumpBox"style="width: 350px; height: 325px"><imgwi ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
通过css类/选择器选取元素文档结构和遍历元素树的文档
通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组. js中使用className属性来保存HTML的class的属性值 var NodeList = d ...
css 选取第一个标签元素
css 选取第一个标签元素方法一:直接获取对应class类名的第一个标签 <div class="idcardlist"> <div class="i ...
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34 图片.文字左右居中很简单,只需要以下代码: 1 text-align:center; 文字上下居中 ...
详解JavaScript中选取元素的所有方法
DOM中选取文档元素的方法总共有5种: 1.通过id值. 2.通过name属性值. 3.通过指定的标签名. 4.通过class类. 5.通过css选择器. 下面我就这五种方法详细解释一下吧. 1.通过 ...
CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
文章目录 1.CSS的元素显示模式 1.1 什么是元素显示模式 1.2 块元素 1.3 行内元素 1.4 行内块元素 1.5 元素显示模式总结 1.6 元素显示模式转换 2.盒子模型:网页布局的基础 ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...

如何通过css选取元素以及封装了获取，删除css的相关操作

如何通过css选取元素以及封装了获取，删除css的相关操作相关推荐

最新文章

热门文章