我如何使用javascript获取任何元素的背景颜色,比如Div.我试过了:-
<html>
<body>
<div id="myDivID" style="background-color: red">shit happens</div>
<input type="button" value="click me" onclick="getColor();">
</body>
<script type="text/javascript">
function getColor(){
myDivObj = document.getElementById("myDivID")
if ( myDivObj ){
alert ( 'myDivObj.bgColor: ' + myDivObj.bgColor ); // shows: undefined
alert ( 'myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor ); // shows: undefined
//alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :)
alert ( 'style:bgColor: ' + getStyle ( myDivObj, 'bgColor' ) ); //shows: undefined
alert ( 'style:backgroundcolor: ' + getStyle ( …Run Code Online (Sandbox Code Playgroud) 使用jQuery(或只是JavaScript),如何检测元素的继承背景颜色?
例如:
<div style="background-color: red">
<p id="target">I'd like to know that the background-color here is red</p>
</div>
Run Code Online (Sandbox Code Playgroud)
然而:
$('#target').css('background-color') == rgba(0,0,0,0)
Run Code Online (Sandbox Code Playgroud)
和
$('#target').css('backgroundColor') == rgba(0,0,0,0)
Run Code Online (Sandbox Code Playgroud)
我要求一般的解决方案. $('#target').parent().css('background-color')会在这种情况下工作,但不是全部.
目前我想获得指定对象的真实背景颜色,这里,真实意味着人们看到的内容,例如,给出以下代码:
<div id="foo" style="background-color: red">
I am red
<span id="bar">
I have no background, but I am red
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
span #bar的真正背景颜色应该是rbg(255,0,0).
到目前为止,我做它喜欢这样.但我认为我的解决方案有点愚蠢,或者可能存在缺陷.所以我想知道是否有更好的方法呢?
提前致谢 :)
这是一个惊喜.以下代码似乎没有给我屏幕上的实际颜色:
h1 = document.querySelector("h1");
window.getComputedStyle(h1).color
Run Code Online (Sandbox Code Playgroud)
给rgb(0, 0, 0)我认为是正确的.然而
window.getComputedStyle(h1).backgroundColor
Run Code Online (Sandbox Code Playgroud)
给rgba(0, 0, 0, 0).我在屏幕上看到的实际背景颜色是白色.
我调用h1的元素在屏幕上可见.我期待得到实际的背景颜色.我得到的值(在rgba中)没有错,但也不是很有用.它只是告诉我背景是完全透明的 - 这不是一种颜色.
如何获得RGB的实际背景颜色?
据我了解getComputedStyles()方法,它应该返回一个对象,该对象允许访问 HTML 元素节点的实际 CSS 属性值。
我用一个包含跨度的段落创建了这个简单的例子:
let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");Run Code Online (Sandbox Code Playgroud)
<p style="background-color: orange">
<span style="color: green">Empty</span>
</p>Run Code Online (Sandbox Code Playgroud)
段落的背景颜色是orange,所以跨度也应该有那个属性值,还是我弄错了?是否会忽略继承的值getComputedStyles?如果是这样,我怎样才能获得跨度的实际可见背景颜色?谢谢你。