javaScript 元素的位置,尺寸,宽度总结上

By | 04月28日
Advertisement
<style>
    body{
        margin:0px;
        padding:0px;
        }
    #div1{
        width:300px;
        height:200px;
        background:#CC3;
        margin:30px auto 0px 10px;
        position:relative;
        }
    #div2{
        width:300px;
        height:200px;
        background:#096;
        position:absolute;
        left:310px;
    }
    #div11{
        margin-left:10px;
        }
</style>

</head>
<body>
    <div id='div1'>
        xxxxxx
        <div id='div11'>fasdfa</div>
    </div>
    <div id='div2'>

    </div>
    <div id='div3' style="width:200px">
        <div id='div31'></div>
    </div>

</body>

//可视区及屏幕坐标
//clientX 可视区x坐标,距离左边框的位置,clientY,
//鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

//pageX,pageY 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
//screenX 屏幕区x坐标,距离左屏幕的位置,creenY

////在IE中,event对象是全局的,它被存储在window.event中
//在chrome 版本 40.0.2214.115 m中  evt与window.event都支持,改变其顺序不影响其结果,都是clienX当出现滚动,他显示的值是会变化的,而pageX不会
window.onload=function(){
        document.onclick=function(evt){
                var e=window.event||evt;
                //alert(e.clientX+' '+e.clientY);
                document.getElementById('div2').innerHTML='evt: '+evt+'  '+ 'window.event: '+window.event+'  '+'clientX: '+e.clientX+' '+'clientY: '+e.clientY+' '+'pageX: '+e.pageX+' '+'pageY: '+e.pageY;
                setTimeout(function(){
                        document.write('document.body.clientLeft: '+document.body.clientLeft);
                        document.write('document.body.scrollLeft: '+document.body.scrollLeft);
                    },4000);

            };

            //获取尺寸
            //来看下offsetParent这个属性
            //看下实例的效果,意思就差不多明白了
            //找寻有定位设置的父节点,没有就是body了,听说有一些是html,到是没有验证
            console.info(document.getElementById('div11').offsetParent);//div1
            console.info(document.getElementById('div31').offsetParent);//body
            //对比下我写的css格式是不是有点眼熟
            console.info(document.getElementById('div1').offsetHeight);//200
            console.info(document.getElementById('div1').offsetLeft);//10
            console.info(document.getElementById('div1').clientLeft);//0

            console.info(document.getElementById('div1').offsetTop);//30
            console.info(document.getElementById('div1').offsetWidth);//300
            //下面这两种写法第一个是获取不到,第二个获取到了
            //总结:这种方式只有行内才能获得
            //再注意获得的值,一个带px,一个不带
            console.info(document.getElementById('div1').style.width);//这个为空
            console.info(document.getElementById('div3').style.width);//200px
            //再验证一个
            console.info(document.getElementById('div3').offsetWidth);//200
            //还有一些body,screen等等
            //一些总结
            console.info('网页可见区域宽: '+document.body.clientWidth);
            console.info('网页可见区域高: '+document.body.clientHeight);

            console.info('网页正文全文宽: '+document.body.scrollWidth);
            console.info('网页正文全高: '+document.body.scrollHeight);
            console.info('网页正文部上: '+window.screenTop);
            console.info('网页正文部左: '+window.screenLeft);

            console.info('屏幕分辨率的高: '+window.screen.height);
            console.info('屏幕分辨率的宽: '+window.screen.width);

            console.info('屏幕可用工作区的高: '+window.screen.availHeight);
            console.info('屏幕可用工作区的宽: '+window.screen.availWidth);

            //获取绝对位置
            //第一种方法

            //第二种方法

    };

//至此结束

Similar Posts:

  • javaScript 元素的位置,尺寸,宽度总结下

    <style> body{ margin:0px; padding:0px; } #div1{ width:300px; height:200px; background:#CC3; margin:30px auto 0px 10px; position:relative; } #div2{ width:300px; height:200px; background:#096; position:absolute; left:310px; } #div11{ margin-left:10px;

  • Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

  • javascript中获得页面元素的位置信息

    在做javascript的时候,经常会需要获取页面上某个元素的位置.javascript中的offsetTop和offsetLeft方法返回的是该对象相对于"相对父元素"的位置信息.元素的相对父元素是offsetParent而不是parentNode,这点很重要,如果使用parentNode,在页面的元素的样式中设置有float属性的时候,得到的很可能会是错误的位置信息.获得元素位置信息的代码如下: function positionOffset(element) { var top=

  • javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinat

  • js获取可见元素和隐藏元素(display:none)尺寸的方法

    一.获取可见元素的宽/高 js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:100px;">test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script&

  • 给图片添加图片水印[可按位置,水印图上放大缩小]

    /// <summary> /// 给图片添加图片水印[可按位置,水印图上放大缩小] /// </summary> /// <param name="ImgFile">原图文件地址</param> /// <param name="WaterImg">水印图片地址</param> /// <param name="sImgPath">水印图片保存地址</pa

  • Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

    Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox) 说明: 拖曳流程 鼠标按下->(鼠标移动->元素移动) 鼠标按键弹起->元素停止移动 针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent() 针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener Opera 以上两种

  • 新发现getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, an

  • PHP next()移动数组内部指针到下一个元素的位置,并返回该元素 prev()

    PHP prev() 函数 PHP Array 函数 定义和用法 next() 函数把指向当前元素的指针移动到下一个元素的位置,并返回该元素的值.如果内部指针已经超过数组的最后一个元素,函数返回 false. prev() 函数把指向当前元素的指针移动到上一个元素的位置,并返回当前元素的值. 如果内部指针已经超过数组的第一个元素之前,函数返回 false. 语法 prev(array) 参数 描述 array 必需.规定要使用的数组. 说明 prev() 和 next() 的行为类似,不过它将内

  • 越来越多的运动元素也被运用到时装上

    在你努力实现自己新年愿望的同时,也要坚持运动保持身体健康.随着健身的普及,越来越多的运动元素也被运用到时装上. 休闲穿搭是近两年一个流行趋势,在你滑雪后怎么穿能让你看上去运动健康又不过于随便呢?运动服和便服的完美混搭,加上一个可以替代运动包的真皮行李袋,轻轻松松就搞定!让我们向秀场上的模特们学习一下这混搭术吧.让你仅一身衣服就能出现在两种场合,省去了换衣服的麻烦事儿! Moncler2014秋冬秀场-金属色运动大衣+黑色Leggings 金属色是今年冬天最热的流行元素,来一件这样的廓形运动大衣让

Tags: