元素到页面的绝对距离

function getPos(obj){
    var iTop = 0;
    while(obj){
        iTop += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return iTop;
}

css 制作三角形

span{
    border-top:10px dashed transparent;
    border-left:10px dashed transparent;
    border-right:10px dashed transparent;
    border-bottom:10px solid red;
    width: 0px; height: 0px; display: block;
}
时间: 2024-08-26 07:51:55

元素到页面的绝对距离的相关文章

getBoundingClientRect获取元素在页面上的位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分). 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height: 这里的top.left和css中的理解很相似,width.height是元素自身的宽高,但是right,bottom和css中的理解有点不一样.right是指元素右边界

页面元素与页面间的间隙

当我们做一个页面时,默认页面元素距页面左右上下都有一个很小的间隙.如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> </head> <style> .three{ width: 100px; height: 100px; border-style:

获取元素在页面中left,top值(忽略其父级的定位)

函数用到的属性有: element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器 element.offsetParent 返回元素的偏移容器 element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

js 获取元素在页面上的偏移量的最佳方式

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

jQuery 检查某个元素在页面上是否存在实例代码

用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) {   //元素存在时执行的代码 }  不能使用以下代码: if($("#tt")) {   //永远执行,不管元素是否存在 } 这就是为什么要根据元素的长度来判断元素在页面中是否存在的原因.

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

1.层叠和继承的概念: CSS层叠性是指CSS样式在针对同一元素配置同一属性是,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠. 继承:子元素会自动拥有父元素的某些CSS属性,通常来说,文本类的属性会被继承(字体.字号.颜色) 2.选择器的优先级 !important>id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器 3.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

javascript获取元素结点到页面的绝对距离的方式

var div = document.getElementById('div');var p = getPos(div); function getPos(obj) { var pos = {left:0,top:0}; while(obj) { pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; } <div id="div" style=&quo

js获取元素的页面坐标

一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+border-right,即offsetWidth描述的是元素的宽度,是指元素的宽度+内边距(左右两个)+边框(左右两个),不包括外边距和滚动条部分 offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,即offsetH