现在的位置: 首页 > web前端 > 正文

javascript实现可视化布局

2018年08月09日 web前端 ⁄ 共 851字 ⁄ 字号 评论关闭
 

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





抱歉!评论已关闭.