jQuery: проверьте, имеет ли элемент определенный стиль (не встроенный)

Question

Можно ли проверить через jQuery или vanilla JS, если элемент имеет определенный стиль?

В моем случае я хочу проверить, есть ли какие-либо поля ввода на странице с красной рамкой - применяется через внешний CSS-файл. Нет встроенных-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!'); 
    } 
});