檢索表格中某個元素的背景顏色

我無法檢索/確定之前使用css着色的html表格中單元格的背景顏色。我希望能夠使用JavaScript檢索該顏色並將其存儲到變量中，以便在代碼中進一步使用（未顯示）。檢索表格中某個元素的背景顏色

下面是我試圖在一個簡單的規模上做一個jfiddle：http://jsfiddle.net/adtsolutions/6P629/。

HTML：

<body> 
<table> 
    <tr> 
     <td>Hello there</td> 
     <td id="HDD">I want to know this cell's color</td> 
    </tr> 
</table>

CSS：

TD { 
    TEXT-ALIGN: CENTER; 
    BORDER: 2PX SOLID BLACK; 
    BORDER-COLLAPSE: COLLAPSE; 
    BACKGROUND-COLOR: #D0A9F5; 
}

JS：代碼還提供如下

//document.getElementById("HDD").style.background="#D0A9F5" 
var myColor = document.getElementById("HDD").style.background; 
alert(myColor);

現在，我不斷收到一個「空白「當試圖展示內容時變量「myColor」的ts，它應該是背景顏色。我注意到的是，如果我在javascript中取消註釋第一行，myColor會清楚地說出我希望它顯示的內容。任何想法，我可能做錯了，或者爲什麼這隻適用於背景顏色是在JavaScript中內嵌的定義？非常感謝您的建設性幫助！

來源

2013-12-11 ADT

可能重複[是否有可能從通過JavaScript的HTML節點找到CSS規則？]（http://stackoverflow.com/questions/4482374/is-it-possible-to-find-css-rules-from-an-html-node-via-javascript） –

喜歡這個？ http://jsfiddle.net/E4eBJ/ – adaam

@adaam這正是我正在尋找的！謝謝！ – ADT

你可以使用jQuery和使用css()方法，你可以使用$('#selector').css('background-color')或$('#selector').css('backgroundColor')像這樣：

<div class="test">hello</div>

CSS：

.test { 
    background-color:#fff; 
    width:100px; 
    height:100px; 
}

JS：

$(document).ready(function() { 
    var c = $('.test').css("backgroundColor"); 
    alert(c); 
});

的jsfiddle這裏：http://api.jquery.com/css/

來源

2013-12-11 22:09:11 adaam

嘗試更改「... style.background;」到「... style.background-color;」我對JavaScript不太瞭解;但是如果你在JavaScript中引用CSS元素，那麼背景顏色可能是一個更準確的屬性。

來源

2013-12-11 22:05:33 Zulfe

你可以使用.getComputedStyle()將返回RGB顏色：

var theCSSprop = window.getComputedStyle(document.getElementById("HDD"), null).getPropertyValue("background-color");

jsFiddle example

來源

2013-12-11 22:08:59 j08691

關於j08691的答案的更多細節：http://stackoverflow.com/questions/17116909/using-javascript-how-do-i-get-the-background-color-of-a-table-cell-when-i -Click – n1kkou

的JavaScript

：在這裏 .css()了jQuery文檔網站 http://jsfiddle.net/E4eBJ/

更多信息

var Color = document.getElementById("HDD"); 

    var myColor = window.getComputedStyle(Color,null).getPropertyValue('background-Color'); 
    alert(myColor);

小提琴例如：http://jsfiddle.net/6P629/23/

爲了更多地瞭解這個參考以下鏈接的 window.getComputedStyle

來源

2013-12-11 22:27:36

檢索表格中某個元素的背景顏色

回答

相關問題