我有这个HTML页面:
document.addEventListener("DOMContentLoaded", function (event) {
var inner_div = document.getElementById("innerDiv");
console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
});
#outterDiv {
background-color: papayawhip;
}
<div id="outterDiv">
<div id="innerDiv">
I am an inner div
</div>
</div>
我想找出内部div的计算背景颜色,而不必查看parent(s)元素的计算样式。这可能吗?
答案 0 :(得分:4)
你显然想要问
如何找到某些元素的背景颜色,因为该颜色被设置为某些祖先的背景颜色,因为所有干预元素都具有透明的背景颜色?
但是,你的问题很混乱,因为你使用的是&#34; inherited&#34;这个词在CSS中具有非常特殊的含义,这与此无关。
在CSS意义上,background-color
属性不继承。每个元素都有自己的背景颜色,默认情况下为transparent
。
你内在的div 看起来就像它有一个papayawhip背景的原因是它实际上有一个透明的背景,它让外部div的papayawhip背景显示出来。没有任何关于知道或关心木瓜病的内部div,或者可以被查询以回归木瓜病。
找到内部div将具有papayawhip背景的唯一方法是遍历DOM树并找到具有不透明背景颜色的最近父级。这在提出的问题中作为重复目标进行了解释。
顺便问一下,你的根本问题是什么?你为什么要这样做?可能有更好的方法。
答案 1 :(得分:3)
将background-color: inherit;
添加到#innerDiv
document.addEventListener("DOMContentLoaded", function (event) {
var inner_div = document.getElementById("innerDiv");
console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
});
#outterDiv {
background-color: papayawhip;
}
#innerDiv {
background-color: inherit;
}
<div id="outterDiv">
<div id="innerDiv">
I am an inner div
</div>
</div>
答案 2 :(得分:3)
以下是一些普通的js,它们将获取给定元素的有效背景色:
function getInheritedBackgroundColor(el) {
// get default style for current browser
var defaultStyle = getDefaultBackground() // typically "rgba(0, 0, 0, 0)"
// get computed color for el
var backgroundColor = window.getComputedStyle(el).backgroundColor
// if we got a real value, return it
if (backgroundColor != defaultStyle) return backgroundColor
// if we've reached the top parent el without getting an explicit color, return default
if (!el.parentElement) return defaultStyle
// otherwise, recurse and try again on parent element
return getInheritedBackgroundColor(el.parentElement)
}
function getDefaultBackground() {
// have to add to the document in order to use getComputedStyle
var div = document.createElement("div")
document.head.appendChild(div)
var bg = window.getComputedStyle(div).backgroundColor
document.head.removeChild(div)
return bg
}
然后您可以这样称呼它:
var myEl = document.getElementById("a")
var bgColor = getInheritedBackgroundColor(myEl)
该解决方案通过检查特定元素的解析值来工作。如果背景是透明的,它将从元素的父元素重新开始,直到找到定义的颜色或到达顶部为止。
有两个主要概念需要熟悉:
根据MDN,background-color
的初始值为transparent
,并且不是是继承的属性。这意味着,即使父div应用了颜色,任何未设置样式的子div也将具有background-color
的{{1}}。大多数浏览器会将其转换为rgb颜色空间,因此会返回<{> alpha通道 /透明度设置为transparent
的{{1}}值。
这种区别看似微不足道,但重要的是要了解页面上的大多数 div可能是透明的。它们不绘制任何颜色,只是不遮罩父元素。如果继承了背景值,则colors with transparency would stack and get stronger on child elements
根据MDN,resolved values是浏览器从.getComputedStyle()
返回的内容,其中包括计算值和使用值。使用已解析的值有助于处理特殊值,例如rgba(0,0,0,0)
,0%
等,并将所有相对值转换为绝对值。此外,Plus还提供了一个一致的API,用于从属性和通过样式表应用的样式信息中获取样式信息。
因此inherit
不用于确定背景中显示的颜色;它只是在那里获得div的实际值。然后,我们遍历DOM树,直到找到实际值为止。