分享知识-快乐自己: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.");

原文地址:https://www.cnblogs.com/mlq2017/p/10165488.html

时间: 2024-11-08 13:39:00

分享知识-快乐自己:JS 检查元素是否含有某种css样式的相关文章

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

获取元素计算后的css样式封装

获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[attribute];}else { return window.getComputedStyle(obj,null)[attribute];} } 案例: <!DOCTYLE html> <html> <head> <meta charset="uft-8&qu

js用currentStyle和getComputedStyle获取css样式(非行间)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是一个小示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht

Js - 判断元素是否含有某个类

检查当前的元素是否含有某个特定的类: 1.hasClass()方法 if($('#one').hasClass('one')) {  // true  含有 } hasClass()也可同时写多个class,多个之间用空格隔开: if($('#one').hasClass('one one2')) {  //  } 2.is()方法 与 hasClass()方法类似,不过is用的范围更广些(这里只针对检查元素特定类进行举例) if($('#one').is('.one')) {  //  } i

js检查元素是否包含在数组中

说明 在系统中需要检查税率填写的正确性,一定是国家规定的某几种税率,当然可以通过if else进行校验,但是还可以使用定义一个数组然后校验是否包含在元素中进行校验. 优点:添加税率无需修改逻辑,只需要在税率数组中添加即可. Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } var

js用currentStyle和getComputedStyle获取css样式(非行间) 兼容ie与火狐

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是js代码. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name];

js中如何去获取外部css样式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #e6e6e6; } .container{ width: 768px; margin: auto; pad

ntv.js框架(第三章) - 机顶盒CSS样式的编写

机顶盒支持基础的CSS样式属性,例如:margin, padding, float, position等,各厂商对于基础样式属性的渲染差异性也不大.但在CSS3和动画效果支持上各厂商偏差较大,由于机顶盒属弱终端类型(硬件资源弱),内置支持的动画功能有限,而且也不是运营商目前强制要求支持的功能. 同样就目前网内的应用设计要求上来讲,使用到CSS3及动画的应用非常少,大多停留在实验室演示阶段.

javascript操作元素的css样式

我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,尽管它们和传统方法的思想相通,可是却节省了很多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 加入?CSS类 $("#target").addClass(&