获取控件大小和设置调整控件的位置XY示例

获取控件大小和设置调整控件位置XY是页面布局中非常重要的操作。下面提供两个示例，分别介绍如何获取控件大小以及如何调整控件的位置。

示例1：获取控件大小

获取控件大小的方法可以通过JavaScript中的offsetWidth和offsetHeight属性来实现。下面是一个示例代码，可以获取DIV控件的宽度和高度：

<div id="myDiv" style="width: 100px; height: 50px; background-color: #ccc;"></div>

<script>
    var myDiv = document.getElementById("myDiv");
    var width = myDiv.offsetWidth;
    var height = myDiv.offsetHeight;
    alert("宽度：" + width + "，高度：" + height);
</script>

上述代码中，首先通过getElementById方法获取到了ID为“myDiv”的DIV元素，然后使用offsetWidth和offsetHeight属性获取了该元素的宽度和高度。最后使用alert方法将获取到的宽度和高度分别弹窗显示出来。

示例2：设置调整控件位置

我们可以通过JavaScript中的style属性对控件进行调整位置的操作。下面是一个示例代码，可以将DIV控件在页面上居中显示：

<style>
    #myDiv {
        width: 200px;
        height: 100px;
        background-color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
    }
</style>

<div id="myDiv"></div>

<script>
    var myDiv = document.getElementById("myDiv");
    myDiv.style.position = "absolute";
    myDiv.style.top = "50%";
    myDiv.style.left = "50%";
    myDiv.style.marginTop = "-" + myDiv.offsetHeight / 2 + "px";
    myDiv.style.marginLeft = "-" + myDiv.offsetWidth / 2 + "px";
</script>

上述代码中，首先定义了一个宽为200px，高为100px，背景颜色为#ccc的DIV元素，并将其加入到页面中。接着使用style属性对元素进行设置，将其定位到页面中心。其中，top和left属性设置为50%，表示元素的顶部和左侧均与页面中心对齐。之后，margin-top和margin-left属性根据元素的宽和高值进行调整，实现将元素垂直和水平居中显示的效果。

最后，我们使用JavaScript中的style属性，对元素的位置进行调整。首先获取到ID为“myDiv”的元素，然后分别设置其position、top、left以及marginTop和marginLeft属性，实现对元素的位置调整。

通过上述两个示例代码，可以实现获取控件大小以及调整控件位置XY的操作，可以帮助我们更加方便的进行页面布局和设计。