Question

如何用javascript / jQuery覆盖css属性，比如cssHooks（jQuery），但是prop在外部css中。

e.g。

的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属性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 3

直接在元素上设置的样式值将覆盖CSS中设置的内容。如果你想隐藏元素，你可以这样做：

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

在内部，这只是设置elem.style.display = "none";的快捷方式。

你的问题的这一部分让我们感到困惑：“每次我使用背景道具时，我都想隐藏这个元素而不对背景做任何事情。”因此，如果您需要更多答案，您需要澄清您的要求。

隐藏元素不会以任何方式改变背景（尽管它将不再可见）。如果您在保持元素可见的同时尝试隐藏背景，则需要将背景设置为透明。

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

直接在元素上设置此样式值将覆盖您设置的所有CSS样式表规则。

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

我如何覆盖css属性

4 个答案: