我试图报告我创建的椭圆div的边界半径的值,但是我返回了未定义的值。有谁能解释为什么?我犯了一个简单的错误,或者我的代码有问题吗?谢谢!
<!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>
编辑:我已尝试过两个&#34; border-bottom-left-radius&#34;和&#34; borderBottomLeftRadius&#34;结果相同。我应该使用哪一个?
答案 0 :(得分:2)
在渲染元素之前运行脚本。在声明html元素id之后,将脚本块移动到正文的末尾:
#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%;
}
<div id="oval"></div>
<input type="button" value="click me" onClick="compStyle()"/>
<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>