我如何使用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 ( myDivObj, 'backgroundcolor' ) ); // shows:undefined:
alert ( 'style:background-color: ' + getStyle ( myDivObj, 'background-color' ) ); // shows: undefined
}else{
alert ( '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>
小智 54
获取号码:
window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* );
例:
window.getComputedStyle( document.body ,null).getPropertyValue('background-color');
window.getComputedStyle( document.body ,null).getPropertyValue('width');
~ document.body.clientWidth
Dav*_*und 41
与包含连字符的所有css属性一样,JS中的相应名称是删除连字符并使后面的字母大写: backgroundColor
alert(myDiv.style.backgroundColor);
Hus*_*931 20
简单的解决方案
myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;
现在背景颜色存储在新变量中。
https://jsfiddle.net/7q1dpeo9/1/
小智 16
使用jQuery:
jQuery('#myDivID').css("background-color");
原型:
$('myDivID').getStyle('backgroundColor');
使用纯JS:
document.getElementById("myDivID").style.backgroundColor
nem*_*isj 11
这取决于你需要哪种风格.这是一种在CSS或背景样式中定义的背景样式,它是通过javascript(内联)添加到当前节点的吗？
在CSS样式的情况下,您应该使用计算样式.就像你一样CSS.
使用内联样式,您应该使用javascript(inline)reference : CSS;
另请注意,您使用CamelCase /非连字符引用来选择样式,所以不是getStyle(),但是node.style;
这为我工作：
var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor;
而且，甚至更好：
var getStyle = function(element, property) {
return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
};
var backgroundColor = getStyle(myDiv, "background-color");