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