介绍
这篇文章主要介绍原生js怎么实现抵消方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
js的作用是什么 1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于节点。js技术进行服务器端编程。
在为jTool提供抵消(获取当前节点位置)方法时,先后使用了两种方式进行实现,现整理出来以作记录。
前后共使用了两种方式实现了该方法,这里将这两种方法分别列出。
<强>通过递归实现
function 抵消(元素),{
var 才能;offest =, {
,,,:,0,
,,,左:0
,,};
var 才能;_position;
getOffset才能(元素,,真的);
return 才能的;//才能,递归获取,抵消,,可以考虑使用,getBoundingClientRect
function 才能;getOffset(节点,init), {
,,,//,非Element 终止递归
,,,if (node.nodeType !==, 1), {
,,,,,返回;
,,,}
,,,_position =, window.getComputedStyle(节点)(& # 39;位置# 39;);
,,,//,位置=静态:,继续递归父节点
,,,if (typeof (init),===, & # 39;未定义的,,,,,_position ===, & # 39;静态# 39;),{
,,,,,getOffset (node.parentNode);
,,,,,返回;
,,,}
,,,offest.top =, node.offsetTop +, offest.top 作用;node.scrollTop;
,,,offest.left =, node.offsetLeft +, offest.left 作用;node.scrollLeft;
,,,//,position =,固定:,获取值后退出递归
,,,if (_position ===, & # 39;固定# 39;),{
,,,,,返回;
,,,}
,,,getOffset (node.parentNode);
,,}
} //,执行偏移量
var s_kw_wrap =, document.querySelector (& # 39; # s_kw_wrap& # 39;);
抵消(s_kw_wrap);,//,=祝辞,Object {最高:181年,,,左:,400} <强>通过ClientRect实现
function offset2(节点),{
var 才能;offest =, {
,,,:,0,
,,,左:0
,,};//才能,当前为IE11以下,,直接返回{最高:0,,左:,0}
if 才能;(! node.getClientRects () . length), {
,,,return 的;
,,}//才能,当前DOM节点的,display ===, & # 39;节点# 39;,时,,直接返回{最高:0,,左:,0}
if 才能;(window.getComputedStyle(节点)(& # 39;显示# 39;],===,& # 39;没有# 39;),{
,,,return 的;
,,}//才能,Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。//,才能返回值包含了一组用于描述边框的只读属性——左,右和底,单位为像素。除了,width 和,height 外的属性都是相对于视口的左上角位置而言的。//,才能返回如{:,8日,右:,1432,,底部:,548年,左:,8日,宽度:,1424…}
时间=offest 才能;node.getBoundingClientRect ();
var 才能;docElement =, node.ownerDocument.documentElement;
return {才能
,,,:,offest.top +, window.pageYOffset 作用;docElement.clientTop,
,,,左:,offest.left + window.pageXOffset 作用;docElement.clientLeft
,,};
} //,执行偏移量
var s_kw_wrap =, document.querySelector (& # 39; # s_kw_wrap& # 39;);
offset2 (s_kw_wrap);,//,=祝辞,Object {最高:181.296875,左:,399.5} offset2()函数中使用到了.getClientRects()与.getBoundingClientRect()方法,IE11以下浏览器并不支持;所以该种实现,只适于现代浏览器。
<强> .getClientRects()
返回值是ClientRect对象集合(与该元素相关的CSS边框),每个ClientRect对象包含一组描述该边框的只读属性,左,右和底,单位为像素,这些属性值是相对于视口的左上的的。
并包含长度属性,IE11以下可以通过是否包含长度来验证当前是否为IE11以上版现。
<强> .getBoundingClientRect()
返回值包含了一组用于描述边框的只读属性,左,右和底,单位为像素。除了宽度和高度外的属性都是相对于视口的左上角位置而言的。
<强> .getBoundingClientRect()与.getClientRects()的关系
<李> 这两个方法的区别与当前的显示相关,当显示=内联时,.getClientRects()返回当前节点内每一行文本的ClientRect对象数组,此时数组长度等于文本行数。
<李> 当显示!=内联时,.getClientRects()返回当前节点的ClientRect对象数组,此时数组长度为1 .
