Значения свойств getComputedStyle

Question

Значения свойств getComputedStyle

Я пытаюсь сообщить значение радиусов моей границы овального 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" с одинаковыми результатами. Какой из них я должен использовать?

2

javascript css3 getcomputedstyle

Источник

user4119678 24 сен '15 в 05:48

1 ответ

Решение

Другие вопросы по тегам javascript css3 getcomputedstyle

user5157454 24 сен '15 в 06:09 2015-09-24 06:09 · Accepted Answer · 2015-09-24 06:09

Вы запускаете сценарий до визуализации элементов. Переместите блок скрипта в конец тела после объявления идентификатора элемента html:

#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>