原生js判断某个元素是否有指定的class名的几种方法
【注意】以下方法只对class只有一个值的情况下操作
*************************************************************
结构部分:
<div>
<p>1</p>
<p class="test">2</p>
<p>3</p>
</div>
**************************************************************
js部分:
var p = document.getElementsByTagName('p');
for(var i = 0;i <p.length;i++){
//第一种方法,用classList这个H5 API,有兼容性问题
if(p[i].classList.contains('test')==true){
console.log(p[i].innerHTML);
}
//第二种方法,用className这个属性
if(p[i].className=='test'){
console.log(p[i].innerHTML)
}
//第三种方法,用getAttribute()这个方法
if(p[i].getAttribute("class")=='test'){
console.log(p[i].innerHTML);
}
}
以上三种可以任选,条件是不考虑兼容性和多个class名的情况
原生js判断某个元素是否有指定的class名的几种方法的更多相关文章
- 函数语法:原生js判断某个元素是否有指定的class名的几种方法
var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...
- 【转载】 原生js判断某个元素是否滚动到底部
document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- js判断一个元素是否在数组中
js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInAr ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- java中把文件拷贝到指定目录下最简单几种方法
java中把文件拷贝到指定目录下最简单几种方法 String savePath = "D:/file";// 文件保存到d盘的file目录下 File savefile = n ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
随机推荐
- HTML5实现坦克大战(一)
Tank 字段 x:坦克的中心点的横坐标 y:坦克的中心点的纵坐标 dir:坦克的前进的方向 spped:坦克的速度 color:坦克的颜色,用于区分种类不同的坦克 bullet:坦克的子弹 为a ...
- 图片处理之-Bitmap.Config,jpeg压缩与大小
关于ARGB_8888.ALPHA_8.ARGB_4444.RGB_565的理解 A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARGB_4444:每个像素占四位,即A=4,R=4 ...
- java.lang.ArithmeticException: / by zero
- [Android]Plug-in com.android.ide.eclipse.adt was unable to load class com.android.ide
今天启动eclipse的时候报了上述错误,打开xml是都报错.其实解决方法很简单:重启eclipse即可.
- 浅谈Oracle数据库性能优化的目标
Oracle性能优化保证了Oracle数据库的健壮性,为了保证Oracle数据库运行在最佳的性能状态下,在信息系统开发之前就应该考虑数据库的优化策略.从数据库性能优化的场景来区分,可以将性能优化分为如 ...
- ios 中的构造方法
构造方法 1.什么是构造方法? 初始化对象的方法. 默认情况下,在 OC 当中创建1个对象分为两部分(new 做的事): +alloc:分配内存空间 -init :初始化对象 2.构造方法的作用是? ...
- 相见恨晚——MarkDown
什么是MarkDown MarkDown是一种轻量级的标记语言 MarkDown使你更加关注文章的内容 MarkDown使文章的排版变得简单直接 什么情景下使用MarkDown 在我们熟悉的githu ...
- can't find which disk is full
df -lh lsof | grep delete $program_id df -lh # 搞定问题
- SVN版本控制服务器安装与配置
版本管理在我们日常学习中一般接触不到,因为我们都是一个人在学习与开发一些练习的项目.但是实际中,一般项目都是协同开发的,这样就需要一个版本管理工具,常见的有SVN/CVS/GitHut等...通过它们 ...
- Android加载图片小结
应用中用到图片加载需要解决的问题 无网络环境下图片不可用 图片的本地缓存,或者默认预加载的图片 低配置机型,加载图像资源超内存(OutOfMemory, OoM) 需要合理使用内存,尤其是bitmap ...