如何div使用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) { console.log('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined console.log('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :) console.log('style:bgColor: ' + getStyle(myDivObj, 'bgColor')); //shows: undefined console.log('style:backgroundcolor: ' + getStyle(myDivObj, 'backgroundcolor')); // shows:undefined: console.log('style:background-color: ' + getStyle(myDivObj, 'background-color')); // shows: undefined } else { console.log('damn'); } } /* copied from `QuirksMode` - http://www.quirksmode.org/dom/getstyles.html - */ function getStyle(x, styleProp) { if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); return y; } </script> </html>
与所有包含连字符的css属性一样,它们在JS中的对应名称是删除连字符并使用以下字母大写: backgroundColor
backgroundColor
alert(myDiv.style.backgroundColor);