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

javascript jquery html css

297 просмотра

4 ответа

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

В моем случае я хочу проверить, имеет ли какое-либо поле ввода на странице красную рамку - применяется через внешний CSS-файл. Нет inline-css и no 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/

Автор: albuvee Источник Размещён: 08.11.2019 11:19

Ответы (4)


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!');
        }
    });
Автор: Dennys Размещён: 20.08.2016 01:45

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" />

Автор: DavidDomain Размещён: 20.08.2016 12:52

0 плюса

Создайте один класс, который имеет красный цвет, как

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

Я надеюсь, что это будет полезно для вас.

Автор: chirag satapara Размещён: 20.08.2016 12:49

0 плюса

Вы можете использовать ниже код

$('.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!');
  }
});
Автор: GSB Размещён: 20.08.2016 12:59
Вопросы из категории :
32x32