脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js判断元素class名

基于原生js实现判断元素是否有指定class名

 更新时间：2020年07月11日 11:39:08   作者：小猿笔记  
这篇文章主要介绍了基于原生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中图片压缩的方法小结

    JS中图片压缩的方法小结

    这篇文章主要介绍了JS中图片压缩的方法，包括等比压缩图片的方法,需要的朋友可以参考下
    2017-11-11
  • setTimeout函数的神奇使用

    setTimeout函数的神奇使用

    setTimeout函数是一个原生的javascript函数。setTimeout函数会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛，例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框，或者是鼠标点击某个元素后隔几秒钟在删除这个元素。
    2017-02-02
  • Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法
    2016-11-11
  • 使用uni-app开发微信小程序的实现

    使用uni-app开发微信小程序的实现

    这篇文章主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • javascript ie6兼容position:fixed实现思路

    javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置，由于网页中类似这样的元素很多，所以本文的出现是很有必要的了，接下为大家介绍下javascript如何实现ie6下的position:fixed
    2013-04-04
  • Javascript技术栈中的四种依赖注入详解

    Javascript技术栈中的四种依赖注入详解

    这篇文章主要为大家详细介绍了Javascript技术栈中的四种依赖注入，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript基于inquirer封装一个控制台文件选择器

    JavaScript基于inquirer封装一个控制台文件选择器

    这篇文章主要介绍了JavaScript基于inquirer封装一个控制台文件选择器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-08-08
  • 避免回车键导致的页面无意义刷新的解决方法

    避免回车键导致的页面无意义刷新的解决方法

    相信大家在实现页面局部刷新过程中都遇到过类似的问题：在文本框中输入完要搜索的关键字段，按回车结果整个页面刷新了，局部刷新肯定失败。
    2011-04-04
  • JS获取DropDownList的value值与text值的示例代码

    JS获取DropDownList的value值与text值的示例代码

    本篇文章主要是对JS获取DropDownList的value值与text值的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript实现文字展开和收起效果

    JavaScript实现文字展开和收起效果

    这篇文章主要为大家详细介绍了JavaScript实现文字展开和收起效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论