分享知识-快乐自己:JS 检查元素是否含有某种css样式
第一种 原生 JS:
************************************************************* 结构部分: <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名的情况
第二种 jquery:
$("#id").hasClass("className") ? console.log("Has this class.") : console.log("Do not has this class.");
分享知识-快乐自己:JS 检查元素是否含有某种css样式的更多相关文章
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式
html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- js检查元素是否包括在数组中
说明 在系统中须要检查税率填写的正确性,一定是国家规定的某几种税率,当然能够通过if else进行校验,可是还能够使用定义一个数组然后校验是否包括在元素中进行校验. 长处:加入税率无需改动逻辑,仅仅须 ...
- js中如何去获取外部css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js用currentStyle和getComputedStyle获取css样式(非行间) 兼容ie与火狐
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
- 用JS打开网页时自动更改css样式,可用于处理浏览器兼容
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- js的append拼接html丢失css样式解决
htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='left ...
随机推荐
- [WebGL入门]二十五,点光源的光照
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...
- 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略
转自:http://blog.csdn.net/gao5528/article/details/6256119 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略(K5系列产品篇) 一年 ...
- Linux 安装json神器 jq
wget -O jq https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64 chmod +x ./jq cp jq /u ...
- Java并发:等待事件发生后所有线程继续执行
等待某一个指定的事件发生后,才让多个等待的线程继续执行,以下是我能想到的几个方法,欢迎讨论.指正. 1.闭锁CountDownLatch 闭锁是典型的等待事件发生的同步工具类,将闭锁的初始值设置1,所 ...
- JSP 连接数据库JDBC有一定的了解
JSP 连接数据库 本章节假设您已经对JDBC有一定的了解.在开始学习JSP数据库访问前,请确保JDBC环境已经正确配置. 首先,让我们按照下面的步骤来创建一个简单的表并插入几条简单的记录: 创建表 ...
- math课本复习
第七章 微分方程 第一节 微分方程的基本概念 未知函数.未知函数的倒数与自变量之间的关系的方程,叫做微分方程. 第二节 可分离变量的微分方程 第三节 齐次方程 第四节 一阶线性微分方程 总结:任 ...
- Laravel开发:Laravel核心——Ioc服务容器源码解析(服务器绑定)
服务容器的绑定 bind 绑定 bind 绑定是服务容器最常用的绑定方式,在 上一篇文章中我们讨论过,bind 的绑定有三种: 绑定自身 绑定闭包 绑定接口 今天,我们这篇文章主要从源码上讲解 Ioc ...
- java.sql.SQLException: 无法转换为内部表示 -〉java 查询oracle数据库返回错误信息
java.sql.SQLException: 无法转换为内部表示 Query: SELECT * FROM nontheasttycoon Parameters: [] at org.apac ...
- Android 适配(drawable文件夹)图片适配(二)
参考自(https://blog.csdn.net/myoungmeng/article/details/54090891) Android资源文件存放: android的drawable文件一共可以 ...
- lua例子(进出栈)
#include <stdio.h> extern "C" { #include "lua-5.2.2/src/lauxlib.h" #includ ...