js小实例(寻找并控制dom位置)

最新推荐文章于 2023-05-31 21:31:43 发布

greatverve

最新推荐文章于 2023-05-31 21:31:43 发布

阅读量621

点赞数

分类专栏： JavaScript学习文章标签： div fp oo c

本文链接：https://blog.csdn.net/greatverve/article/details/3426769

版权

JavaScript学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript">
    //寻找位置函数
    function fp(o){l=o.offsetLeft;t=o.offsetTop;w=o.offsetWidth;h=o.offsetHeight;while(oo=o.offsetParent){l+=o.offsetLeft;t+=o.offsetTop}return {x:l,y:t,w:w,h:h}}
    function f(o){
        var p = fp(o);
        var msg = "距左："+p.x+"  距顶："+p.y+"  宽："+p.w+"  高："+p.h;
        alert(msg);
    }
    function c(o){
        var p = document.getElementById(o);
        p.style.left = '100px';
        p.style.top = '100px';
    }
    </script>
</head>
<body>
<div id="div1" onclick="f(this)" style="position:absolute;width:300px;height:200px;background:#eef;">点击查看位置信息</div>
<div id="div2" onclick="c('div1')" style="position:absolute; left:300px;">点击改变位置</div>
</body>
</html>
 

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小实例(寻找并控制dom位置)

html xmlns="http://www.w3.org/1999/xhtml" >head> title>无标题页title> script type="text/javascript"> //寻找位置函数 function fp(o){l=o.offsetLeft;t=o.offsetTop;w=o.offsetWidth;h=o.of
复制链接

扫一扫

专栏目录