jQuery：檢查元素是否具有特定樣式（非內聯）

Question

是否可以通過jQuery或Vanilla JS檢查某個元素是否具有特定樣式？

就我而言，我想檢查頁面上的任何輸入字段是否帶有紅色邊框-通過外部CSS文件應用。 沒有inline-css，也沒有style -attr，樣式完全是外部的。

對於我的初始測試，我從此StackOverflow-Answer中獲取了以下代碼： 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

你可以用

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 2

像這樣嘗試：

 $('.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 3

創建一個具有紅色的類，例如

.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 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!');
  }
});