1

我如何使用 javascript/jQuery 覆盖 css 属性，例如 cssHooks(jQuery)，但 prop 在外部 css 中。

例如

索引.html

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

样式.css

#test {background: red;}

每次我使用背景道具时，我都想隐藏这个元素并且对背景不做任何事情。

“但我不仅想对某些 div (#test) 这样做，而且对我的 css 中带有背景道具的每个元素都这样做”

4

4 回答 4

1

如果你使用 jquery，你可以这样做

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

这将隐藏元素并保持背景不变。

[编辑]我认为我以前不理解这个问题。根据您的评论，您想要做的是更改正在使用该background属性的内容？我不相信有办法做到这一点。我能想到的唯一选择是遍历每个 DOM 元素并检查是否设置了 element.style.background。

于 2012-04-09T18:16:55.027 回答
1

如果要隐藏background设置了 css 属性的元素，最好为这些元素添加一个类。然后根据类隐藏元素。

下面的示例隐藏了所有具有 class 的项目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();
于 2012-04-09T18:28:59.647 回答
0

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

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

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

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

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

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

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

于 2012-04-09T18:19:15.353 回答
0

使用javascript检查背景属性时，不同的浏览器会返回不同的值。Chromergba(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();
    }
});

小提琴

于 2012-04-09T19:07:03.713 回答