javascript实现可视化布局

最新推荐文章于 2024-07-25 11:26:35 发布

童年的天空

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.8k

点赞数

分类专栏： RIA 文章标签： javascript div button function input html

本文链接：https://blog.csdn.net/scorpio3k/article/details/2696816

版权

RIA 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
  <body>
    <script>
        document.execCommand("2D-position", false, false);
    </script>
    <div contenteditable="true">
      <div id="ok" style="width:100px;height:100px;color:white;background-color:#ff0000;position:absolute;left: 300px;">我的调整</div>
    </div>
    <p></p><p></p><p></p><p></p><p></p>
    <span contenteditable="true">

      <span style="width:100px;height:100px;color:green;background-color:#00ff00;position:absolute;left: 350px;">else1</span>
    </span>
    <p></p><p></p><p></p><p></p><p></p>
    <div contenteditable="true">
      <div style="width:100px;height:100px;color:white;background-color:#0000ff;position:absolute;left: 400px;">else2</div>
    </div>

    <input type="button" value="显示位置" onclick="wzvi();">

    <script type="text/javascript">

        function wzvi(){
            var isme=document.getElementById("ok");
            alert(" 左:"+isme.offsetLeft+"  顶："+isme.offsetTop+"  高："+isme.offsetHeight+"  宽："+isme.offsetWidth);
        }
    </script>
  </body>
</html>