Как я могу переопределить свойство css

Question

Как я могу переопределить свойство css с javascript/jQuery, например cssHooks (jQuery), но prop был во внешнем css.

например.

index.html

<div id="test">abc</div> 

styles.css

#test {background: red;} 

и каждый раз, когда я использую фоновую опору Я хочу, чтобы скрыть этот эль и ничего не делать с фоном.

«но я хочу сделать это не только для определенного DIV (#test), но для каждого элемента с фоновой опорой в моем CSS»

Answer 1

если вы используете JQuery, вы можете просто сделать

$('#test').css('display','none'); 

Это скроет элемент и оставит фон незатронутым.

[Изменить] Я не думаю, что раньше я понял вопрос. За ваш комментарий, что вы хотите сделать, это изменить вещи, которые используют свойство background? Я не верю, что есть способ сделать это. Единственный вариант, о котором я могу думать, - это пропустить каждый элемент DOM и проверить, есть ли у него элемент element.style.background.

Answer 2

Значения стиля, установленные непосредственно на элементе, будут переопределять все значения, установленные в CSS. Если вы хотите, чтобы скрыть элемент, вы можете сделать это так:

$('#test').hide(); 

Внутренне, это просто ярлык для настройки elem.style.display = "none";.

Эта часть вашего вопроса смущает нас: «Каждый раз, когда я использую фоновое оповещение, я хочу скрыть этот элемент и ничего не делать с фоном». поэтому, если вам нужно больше ответить на этот вопрос, вам нужно будет уточнить, что вы просили.

Скрытие элемента не меняет фон каким-либо образом (хотя оно больше не будет видно). Если вы пытаетесь скрыть фон, сохраняя видимый элемент, вам нужно будет установить фон обратно на прозрачный.

$('#test').css("background", "transparent"); 

Установка значения этого стиля непосредственно на элементе отменяет любые установленные вами правила таблиц стилей CSS.

Answer 3

Если вы хотите скрыть элементы, у которых есть свойство css background, было бы лучше добавить класс к этим элементам. Затем скройте элемент на основе класса.

Приведенный ниже пример скрывает все предметы класса background-set.

$('.background-set').hide(); 

Чем хуже всего было бы захватить элементы и отфильтровать, если свойство background не установлено. Я начал поиск с помощью селектора div, но вы можете расширить его по мере необходимости.

$('div').filter(function() { 
    return $(this).css('background').replace('rgba(0, 0, 0, 0) none repeat scroll 0% 0%','').length > 0; 
}).hide(); 

Answer 4

При использовании javascript для проверки свойства фона разные браузеры возвращают разные значения. Chrome возвращает rgba(0, 0, 0, 0) none repeat scroll 0% 0% для элемента без фонового набора, поэтому проверка длины возвращаемой строки не будет работать, другой браузер может не иметь поддержки rgba и вернуть что-то еще.

Все, что вам действительно нужно сделать, это проверить, если фон свойство соответствует указанным выше, по крайней мере для Chrome, а затем выяснить, что другие браузеры возвращают, а также, и сделать что-то действительно неэффективную, как:

var pattern=/rgba\(0\, 0\, 0\, 0\)/gi; 

$.each($('*'), function(index, item) { 
    var bg = $(item).css('background'); 
    if (!bg.match(pattern)) { 
     $(item).hide(); 
    } 
}); 

FIDDLE