兼容及DOM解释差异笔记—

1.offsetLeft以及offsetTop:

　　1.1 offsetLeft ：只读，当前元素到定位父级的距离，也就是当前元素的offsetParent的距离

　　1.2 offtsetLeft与offsetParent区别：

　　　　在没有定位父级的情况下：

　　　　　　offsetParent 默认定位父级为body，offtsetLeft 默认定位父级为html

　　　　在有定位父级的情况下：

　　　　　　ie7及以下：如果自身没有设置定位，offtsetLeft 是到body的距离，如果有定位的情况下则就是定位到父级的距离

　　　　　　其他浏览器：到定位父级的距离

2.style.width-------样式宽（带px单位）

　clientWidth-------样式宽 + padding，为可视区宽（不带px单位）

　offsetWidth------占位宽，样式宽 + padding + border （不带px单位）

3.获取元素到页面顶级的距离

　　这里利用offsetParent

function getPos(obj){var p = { left : 0, top : 0 };while (obj){p.left += obj.offsetLeft;p.top += obj.offsetTop;obj = obj.offsetParent; //obj的定位父级对象
}
/*保存每一个当前对象到上一个父级定位对象的距离累加到p.left和p.top每保存一次就将当前obj替换为原obj的父级定位对象。知道最后顶层定位对象为body时，body的父级定位对象会为null，跳出循环
*/
}
var a = getPos(document.getElementById("div1"));//这样使用
alert(a.left)

4.操作元素属性

　　4.1 使用 . 获取或设置，如一个 input.value;

　　4.2 使用[] , 如 elmObj['value'];

　　4.3 elm.getAttribute(属性名),这是获取指定元素的指定属性值的方法。elm.setAttribute(属性名,属性值),设置指定元素指定属性名的值的方法。elm.removeAttribute(属性名)，移除指定属性

　　4.4 注意，非标准浏览器使用4.1和4.2的方法无法操作元素的自定义属性（ie8及以下可以）。4.3中的操作方法中没有这个局限

　　4.5 getAttribute（）方法可以获取元素属性实际的值，如图片的src属性，如果使用4.1或者4.2的方法取出的将会是经过处理过的绝对路径，而getAttribute()则会输出实际的src值（ie7及以下仍会返回经过处理的绝对路径）

　　4.6 IE系列浏览器下有这么一种方法:elm.style.getAttribute(),其他浏览器没有，一般不会这么使用（用来判断是否ie系列浏览器？）

5.动态创建img时ie8及以下无法使用img.width 设置图片大小，是因为ie8及以下要注意先设置img.src再设置大小

转载于:https://www.cnblogs.com/SLEBEE/p/3967467.html

兼容及DOM解释差异笔记——待续相关推荐

【学习打卡02】可解释机器学习笔记之ZFNet
可解释机器学习笔记之ZFNet 文章目录可解释机器学习笔记之ZFNet ZFNet介绍 ZFNet结构特征可视化可视化结构特征不变性特征演化遮挡性分析其他内容总结和思考首先非常感谢同 ...
【学习打卡04】可解释机器学习笔记之Grad-CAM
可解释机器学习笔记之Grad-CAM 文章目录可解释机器学习笔记之Grad-CAM Grad-CAM介绍 Grad-CAM是CAM的泛化形式 Gard-CAM可视化结果 Grad-CAM算法的优点 ...
【学习打卡05】可解释机器学习笔记之CAM+Captum代码实战
可解释机器学习笔记之CAM+Captum代码实战文章目录可解释机器学习笔记之CAM+Captum代码实战代码实战介绍 torch-cam工具包可视化CAM类激活热力图预训练ImageNet- ...
《我们到底应该怎么吃》读书笔记-- 待续
<我们到底应该怎么吃>读书笔记– 待续标签(空格分隔): 读书笔记养生身体 1. 书籍信息及为什么读这本书? 作者:顾中一字数:24万自己读这本书是因为觉得身体是革命的本钱, ...
【学习打卡03】可解释机器学习笔记之CAM类激活热力图
可解释机器学习笔记之CAM类激活热力图文章目录可解释机器学习笔记之CAM类激活热力图 CAM介绍 CAM算法原理 GAP全局平均池化 GAP VS GMP CAM算法的缺点及改进 CAM可视化同 ...
兼容iOS 10 资料整理笔记
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
关于新版本，iOS10的相关内容，兼容iOS 10 资料整理笔记
1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...
深度学习笔记(待续)
背景知识好的特征应具有不变性(大小.尺度和旋转等)和可区分性):例如Sift的出现,是局部图像特征描述子研究领域一项里程碑式的工作.由于SIFT对尺度.旋转以及一定视角和光照变化等图像变化都具有不变 ...
HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

兼容及DOM解释差异笔记——待续

兼容及DOM解释差异笔记——待续相关推荐

最新文章

热门文章