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

您可以使用

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

试试这样：

getline

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

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

4 个答案: