Fatal编程技术网
  • javascript/
  • Javascript 是否可以看到div的继承背景色？

Javascript 是否可以看到div的继承背景色？

javascript jquery html css

Javascript 是否可以看到div的继承背景色？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,是否可以看到div的继承背景色 如何获得html元素继承的颜色？默认情况下，元素是透明的。因此，当一个div放置在某个地方时，它将不会显示在渲染中（但如果该div的背景色为红色，它将立即可见）。如果没有显式背景色，如何找到隐式背景色 下面是一些示例代码。在埃菲尔铁塔图片的左上角有一个1px乘1px的div。那个div的背景色是什么 <html> <body style="margin: 0px;"> <img src="http://www.eiffel-tower

是否可以看到div的继承背景色

如何获得html元素继承的颜色？默认情况下，元素是透明的。因此，当一个div放置在某个地方时，它将不会显示在渲染中（但如果该div的背景色为红色，它将立即可见）。如果没有显式背景色，如何找到隐式背景色

下面是一些示例代码。在埃菲尔铁塔图片的左上角有一个1px乘1px的div。那个div的背景色是什么

<html>
<body style="margin: 0px;">
<img src="http://www.eiffel-tower.us/Eiffel-Tower-Images/eiffel-tower-landmark-4.jpg">
<div style="position: absolute;top: 0px; left: 0px; width: 1px; height: 1px;z-index:1">
</div>
</body>
</html>
您可以递归定义一个传递jQuery对象的函数，该对象检查后台属性

function get_inherited_bg(jquery_object) {
    if (jquery_object.css("background") != "rgba(0, 0, 0, 0) none repeat scroll 0% 0%") {
        return jquery_object.css("background");
    }
    return get_inherited_bg(jquery_object.parent());
}
祝你好运

每个人都会推荐这种方法，但遗憾的是，这种方法并不适用于所有情况。。 您可以使用elements parent属性向上遍历节点树，检查是否存在具有显式背景色的元素

这种方法的问题是，无法识别设置为驻留在其父级之外的元素（例如使用具有适当同级值的position:relative）

有没有便携式的、100%有效的解决方案？ 我能想到的唯一一种能够始终产生正确结果的可移植方法是找到元素在浏览器中的位置（x，y）

然后迭代所有元素，查看是否有任何元素（x，y）导致它位于针元素后面，然后检查此元素是否具有背景色属性

这保证会起作用，但会对性能产生非常严重的影响。如果您确信某个元素不会在其真正父元素的边界之外浮动，请使用所述的第一种方法

如果您希望此方法适用于具有图像作为背景属性的元素，您可以将所述图像加载到画布上，并读取所需像素的值，尽管这将使已经具有性能的吸吮操作更加吸吮，但它可以工作

也

  • 如果一个元素浮动在多个元素之上，该怎么办
  • 在实现所描述内容的函数中应返回哪种颜色
  • 颜色在针元素的中心闪烁，或者可能在左上角
元素浮动在4个不同的元素上，哪一个是元素的背景色？

没有人知道..

好吧，你可以试试这样的东西：

window.getComputedStyle = window.getComputedStyle || function(x) {return x.currentStyle;}
function getActualBackgroundColor(elem) {
    while(elem && window.getComputedStyle(elem).backgroundColor == "transparent")
        elem = elem.parentNode;
    return elem ? window.getComputedStyle(elem).backgroundColor : "transparent";
}
但是，请记住，这仅适用于静态定位的元件（即非
位置：绝对/相对/固定
）不浮动且其父元素没有背景图像的。如果div继承了父元素的背景颜色，您将在div中看到它。这就是级联样式表的优点；-）

因此，为了找到隐式背景色，必须向上移动DOM树，直到找到具有背景色集的父元素


使用Firefox的Firebug或Chrome的开发者工具等，这是非常容易做到的。
您在这里真正要做的是拍摄部分网页的1x1屏幕截图。试试这个问题：


结论似乎是（除非有特殊的扩展、插件等），这样做的方法是：
如果div位于某个颜色之上，而不是背景色？可能重复：您希望如何找到它？使用javascript，或者css或者…@watson-无论如何。@Raminson-我不相信这是重复的。让我解释一下，我在寻找div位置的颜色，这并不一定意味着有一个明确的颜色定义为一个属性。如果显示的颜色不是背景色属性会怎么样？这可能意味着你在一个具有数千种不同颜色的图像上有一个div。据我所知，没有办法用javascript自动获取这些像素的颜色。如果我错了请纠正我如果div只有1px乘1px怎么办？我不认为这是可能的。唯一可以直接绘制的颜色是css属性。然后你需要知道你的div的确切位置。我能想到的唯一（自动）解决方法是截图，并将该位置的颜色与div的位置进行比较。尽管这将是一个惊人的工作量，但不同的浏览器渲染可能会产生很大的问题……我认为这是不可能的，这是肯定的。也许通过检测元素下面元素类型的方法，可以使用一种方法来确定颜色。我相信css可以根据位置将部分图像映射到较小的图像，如jquery.ui。如果没有设置颜色属性怎么办？我更关心的是，如果在“指针”下的任何点没有设置颜色属性，颜色是什么。你不应该。。您应该关注这样一个事实，即一个元素的后面可能有多个N元素，它设置为浮动在元素之上，老实说，这是一个更好的理由。为了回应您的编辑：假设div的大小是1px x x 1px。@TravisJ如果background属性实际上是一幅图像，您可以将图像加载到画布上并逐像素读取，我会将其添加到我的帖子中。