Javascript getComputedStyle属性值
我试图报告我创建的椭圆形div的边界半径的值，但返回了一个未定义的值。有人能解释为什么吗？我是犯了一个简单的错误，还是我的代码有问题？谢谢大家!Javascript getComputedStyle属性值,javascript,css,getcomputedstyle,Javascript,Css,Getcomputedstyle,我试图报告我创建的椭圆形div的边界半径的值，但返回了一个未定义的值。有人能解释为什么吗？我是犯了一个简单的错误，还是我的代码有问题？谢谢大家! <!DOCSTYLE html> <html> <head> <title>CSS3</title> <style> #oval{ width: 500px; height: 300px;
<!DOCSTYLE html>
<html>
<head>
<title>CSS3</title>
<style>
#oval{
width: 500px;
height: 300px;
background: black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
</style>
<script>
var myOval = document.getElementById('oval');
var bRadBL = window.getComputedStyle(myOval).getPropertyValue("border-bottom-left-radius");
var bRadBR = window.getComputedStyle(myOval).getPropertyValue("border-bottom-right-radius");
var bRadTL = window.getComputedStyle(myOval).getPropertyValue("border-top-left-radius");
var bRadTR = window.getComputedStyle(myOval).getPropertyValue("border-top-right-radius");
var bRad = getComputedStyle(myOval).getPropertyValue("borderRadius");
function compStyle(){
alert("Top Left Radius: "+bRadTL+"\nBottom Left Radius: "+bRadBL+"\nTop Right Radius: "+bRadTR+"\nBottom Right Radius: "+bRadBR);
}
</script>
</head>
<body>
<div id="oval"></div>
<input type="button" value="click me" onClick="compStyle()"/>
</body>
</html>
CSS3
#椭圆形{
宽度：500px；
高度：300px；
背景：黑色；
边界左下半径：50%；
边框右下半径：50%；
边界左上半径：50%；
边界右上角半径：50%；
}
var myOval=document.getElementById（'oval'）；
var bRadBL=window.getComputedStyle（myOval.getPropertyValue（“边框左下半径”）；
var bRadBR=window.getComputedStyle（myOval.getPropertyValue（“边框右下半径”）；
var bRadTL=window.getComputedStyle（myOval.getPropertyValue（“边框左上半径”）；
var bRadTR=window.getComputedStyle（myOval.getPropertyValue（“边框右上半径”）；
var bRad=getComputedStyle（myOval）.getPropertyValue（“borderRadius”）；
函数compStyle（）{
警报（“左上半径：+bRadTL+”\n底部左半径：+bRadBL+”\n顶部右半径：+bRadTR+”\n底部右半径：+bRadBR）；
}
编辑：我尝试了“borderBottomLeftRadius”和“borderBottomLeftRadius”，结果相同。我应该使用哪一个？在渲染元素之前运行脚本。在html元素id声明后，将脚本块移动到正文的末尾：
#椭圆形{
宽度：500px；
高度：300px；
背景：黑色；；
边界左下半径：50%；
边框右下半径：50%；
边界左上半径：50%；
边界右上角半径：50%；
}
var myOval=document.getElementById（'oval'）；
var bRadBL=window.getComputedStyle（myOval.getPropertyValue（“边框左下半径”）；
var bRadBR=window.getComputedStyle（myOval.getPropertyValue（“边框右下半径”）；
var bRadTL=window.getComputedStyle（myOval.getPropertyValue（“边框左上半径”）；
var bRadTR=window.getComputedStyle（myOval.getPropertyValue（“边框右上半径”）；
var bRad=getComputedStyle（myOval）.getPropertyValue（“borderRadius”）；
函数compStyle（）{
警报（“左上半径：+bRadTL+”\n底部左半径：+bRadBL+”\n顶部右半径：+bRadTR+”\n底部右半径：+bRadBR）；
}
函数compStyle（）{