js通过class获取元素时的兼容性解决方案
1:::::方法代码如下:
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
/*当className相等时添加到数组中*/
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
};
调用方法(实际使用):
window.onload=function (){
var aBox=getByClass("box");
for(var i=0;i<aBox.length;i++){
alert(aBox[i].innerHTML);
}
};
----------------------------------------------------------------------
2::::::::::::::::::;如<div class="box aa bb"></div>,我们可以将class通过空格拆分成数组,如果要获取的class满足数组中的一个元素,那么就获得此元素。
方法代码如下:
function getByClass(oParent,sClass){//oParent获取类的父元素
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
/*将每个className拆分*/
var arr=aEle[i].className.split(/\s+/);
for(var j=0;j<arr.length;j++){
/*判断拆分后的数组中有没有满足的class*/
if(arr[j]==sClass){
aResult.push(aEle[i]);
}
}
}
return aResult;
};
js通过class获取元素时的兼容性解决方案的更多相关文章
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- js中获取元素的样式兼容性的写法
1:设计元素的样式:el.style.color="red"||el.style["color"]="red" 获取元素的样式:el.st ...
- vue / js使用video获取视频时长
项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没 ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- js通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <meta char ...
- JS——通过标签获取元素、循环语句、数组去重
通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分 ...
- name值与id值在Js获取元素时的区别
1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. H ...
- 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效
最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖 npm install flatpickr --save 随后在页面中引入css ...
- js动画之获取元素属性
首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...
随机推荐
- SpringBoot更改HttpMessageConverters使用FastJson出现乱码问题
1.出现问题的现象!如下截图,使用SpringBoot 进行开发,接口返回的内容出现中文乱码? 接口内容想要返回的内容: 页面返回内容: 惊喜不?意外不? 为什么出现这个情况?不例外的话,很多同事都是 ...
- 【Python】 docker-py 用Python调用Docker接口
[docker-py] 官方文档:[https://docker-py.readthedocs.io/en/stable/images.html] 众所周知,Docker向外界提供了一个API来管理其 ...
- Jenkins集成Docker镜像实现自动发布
1. 思路&流程 Jenkins集成Docker镜像实现自动发布与Jenkins发布mavne项目思路一样总体流程 为:Jenkins 拉去远端源码 -- gitl实现应用打包 -- jenk ...
- .NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序
一.前言 为什么选择VS Code?VS Code 是一款跨平台的代码编辑器,想想他的哥哥VS,并是微软出品的宇宙第一IDE,那作为VS的弟弟,VS Code 也不会差,毕竟微软出品.反正ken是这么 ...
- 数据库 --> 5种关系型数据库比较
5种关系系数据库比较 目前,商品化的数据库管理系统以关系型数据库为主导产品,技术比较成熟.面向对象的数据库管理系统虽然技术先进,数据库易于开发.维护,但尚未有成熟的产品.国际国内的主导关系型数据库管理 ...
- Algorithm --> 筛法求素数
一般的线性筛法 genPrime和genPrime2是筛法求素数的两种实现,一个思路,表示方法不同而已. #include<iostream> #include<math.h> ...
- spring-boot-devtools
Create a new Maven Project and we have two class under the package com.example.demo like below scr ...
- OpenGL学习笔记:第一个OpenGL程序
OpenGL环境搭建参考博客:VS2015下OpenGL库的配置. #include<GL\glew.h> #include<GLTools.h> #include<GL ...
- New UWP Community Toolkit - Carousel
概述 New UWP Community Toolkit V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解 Carousel 的实现. Carousel 是 ...
- 简单的C语言编译器--概述
在学习了编译原理的相关知识后,逐渐的掌握一个编译器的结构.作用和实现方法.同时,希望自己在不断的努力下写出一个简单的C语言编译器. 实现步骤 词法分析器:将C语言测试代码分解成一个一个的词法单元: ...