gpt4 book ai didi

javascript - getComputedStyle 属性值

转载 作者:行者123 更新时间:2023-11-30 16:35:30 26 4
gpt4 key购买 nike

我正在尝试报告我创建的椭圆形 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>

编辑:我尝试了“border-bottom-left-radius”和“borderBottomLeftRadius”,结果相同。我应该使用哪一个?

最佳答案

您在呈现元素之前运行脚本。将脚本 block 移动到主体的末尾,在声明的 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>

关于javascript - getComputedStyle 属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32754201/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com