jQuery：检查元素是否具有特定样式（非内联）

Question

如果元素具有特定样式，是否可以通过jQuery或vanilla JS进行检查？

在我的情况下，我想检查页面上的任何输入字段是否有红色边框 - 通过外部CSS文件应用。没有inline-css，也没有style-attr可用，样式完全是外部的。

对于我的初步测试，我从这个StackOverflow的应答下面的代码：https://stackoverflow.com/a/29659187

$('.formValidation input[type=submit]').on('click',function(e){ 
    e.preventDefault(); 
    var res = $('.formValidation input[type=text],.formValidation input[type=email],.formValidation input[type=url],.formValidation input[type=password]').toArray().some(function(el){ 
    return $(el).css('border-color') === 'rgb(255,0,0)' 
    }); 
    if (res) { 
    console.log('Still at least one field to go!'); 
    } else { 
    console.log('You can submit!'); 
    } 
}); 

...但接缝处的CSS只测试inlineStyles。

更新 我无法更改HTML，标记必须保持“原样”。红色边框只能通过CSS。就像这样：https://jsfiddle.net/z3t6k04s/

Answer 1

试试这样说：

$('.formValidation input[type=submit]').on('click',function(e){ 
     // Prevent Default Form Submit 
     e.preventDefault(); 

     // Define Global if Invalid Fields Exist 
     var hasInvalidInputs = false; 

     // Run Through all to check Input Fields 
     $('input').filter(function(index){ 

      // Check if Invalid Inputs already got detected. If not - check if this field is red 
      if(!hasInvalidInputs) 
      hasInvalidInputs = $(this).css('border-color') == 'rgb(161, 0, 0)';  // If field is red -> update global var to true 
      }); 

     // Check if Invalid Fields are set to true 
     if (hasInvalidInputs) { 
      console.log('Still at least one field to go!'); 
     } else { 
      console.log('You can submit!'); 
     } 
    }); 

Answer 2

创建具有红色 像

.red-color{ 
border-color:red; 
} 

$('.formValidation input[type=submit]').on('click',function(e){ 
    e.preventDefault(); 
    var res = $('.formValidation input[type=text],.formValidation input[type=email],.formValidation input[type=url],.formValidation input[type=password]').toArray().some(function(el){ 
    return $(el).hasClass('red-color'); 
    }); 
    if (res) { 
    console.log('Still at least one field to go!'); 
    } else { 
    console.log('You can submit!'); 
    } 
}); 

我希望这将有助于你一个类。

Answer 3

你可以使用

Window.getComputedStyle()

的Window.getComputedStyle（）方法将活性样式表，并解决任何基本计算这些值可以给出后的元件的所有的CSS属性的值包含。

例子：

var inp = document.getElementsByTagName('input')[0]; 
 

 
var style = window.getComputedStyle(inp, null); 
 

 
console.log(style.getPropertyValue("border-color"))

input[type='text'] { 
 
    border: 1px solid rgb(255, 0, 0); 
 
}

<input type="text" value="Foo" />

Answer 4

您可以使用下面的代码

$('.formValidation input[type=submit]').on('click',function(e){ 
    e.preventDefault(); 

var isValid; 
$("input").each(function() { 
    var element = $(this); 
    if (element.val() == "") { 
     isValid = false; 
    element.css('border-color','red'); 
    }else{ 
isValid = true; 
    element.css('border-color',''); 
} 
}); 
    if (isValid==false) { 
    console.log('Still at least one field to go!'); 
    } else { 
    console.log('You can submit!'); 
    } 
});