每天CookBook之JavaScript-018

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/4thing/p/5655491.html

文章标签：

#javascript #ViewUI

获取DIV的高度和宽度并在DIV中画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>018</title>
    <style type="text/css">
    #elem
    {
        width: 600px;
        height: 400px;
        border: 1px solid black;
    }
    </style>
    <script type="text/javascript">
    window.onload = window.onresize = function(){
        var box = document.getElementById('elem');
        var style = window.getComputedStyle(box,null);
        var height = parseInt(style.getPropertyValue("height"));
        var width = parseInt(style.getPropertyValue("width"));
        var x = width/2;
        var y = height/2;

        var circleRadius = Math.min(width, height)/2;
        var circ = document.getElementById("circ");
        circ.setAttribute("r", circleRadius);
        circ.setAttribute("cx", x);
        circ.setAttribute("cy", y);
    }
    </script>
</head>
<body>
    <div id="elem">
        <svg width="100%" height="100%">
            <circle id="circ" width="10" height="10" r="10" fill="red"></circle>
        </svg>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/4thing/p/5655491.html