网站还没建设好可以备案吗,鞍山百度做网站,大连python培训,网站运营做的是什么工作一 scroll系列属性 ——滚动1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度ele.scrollHeight 有两种情况#xff0c;当内容超出盒子范围后#xff0c;返回的是内容的高度#xff0c;包括padding#xff0c;从顶部内侧到内容的最外部分。当内容不超出盒子范围… 一 scroll系列属性 ——滚动 1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度 ele.scrollHeight 有两种情况 当内容超出盒子范围后返回的是内容的高度包括padding从顶部内侧到内容的最外部分。 当内容不超出盒子范围时返回的是盒子的高度就是 ele.scrollHeight ele.clientHeight,最小值就是ele.clientHeight ele.scrollWidth 情况同 ele.scrollHeight一样。 当内容超出盒子范围后返回的是内容的宽度包括padding从左边内侧到内容的最外部分。 当内容不超出盒子范围时返回的是盒子的宽度就是 ele.scrollWidth ele.clientWidth,最小值就是ele.clientHeight 各个浏览器说法不一 IE、Opera 认为 scrollHeight 是网页内容实际高度可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度不过最小值是 clientHeight。 2 scrollTopscrollLeft ele.scrollTop 滚动时返回的是被卷去部分的顶部到可视区域的顶部看图 ele.scrollLeft 滚动时返回的是被卷去部分的左侧到可视区域的左侧看图 函数封装 ----获取卷曲的宽度和高度 function myScroll() {return {top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }
} egdocument.documentElement-----html标签 document.body ------body内部 ps 想要实时获取页面卷曲的高度或宽度必须在事件内进行 window.onscroll function(){} 3 scrollTo window.scrollTo(1500,2000);//参数1 表示横向滚动到的位置 //参数2 表示纵向滚动到的位置 二 client系列属性 ——可视 1. clientWidthclientHeight ele.clientWidth 返回元素内部空间的宽度widthpadding,是一个只读属性。不包含border和margin以及纵向滚动条。 (ele.clientWidth width padding - 滚动条的高度) ele.clientHeight 返回元素内部空间的高度heightpadding,是一个只读属性。不包含border和margin以及横向滚动条。 (Ele.clientHeight height padding - 滚动条的宽度) 和offsetWidthoffsetHeight 的区别 offsetWidth包含border而clientWidth不包含border。 scrollHeight的最小值和clientHeight相同 2 clientTopclientLeft ele.clientTop 表示一个元素的左边框的宽度以像素表示。是一个只读属性 如果元素的文本方向是从右向左RTL, right-to-left并且由于内容溢出导致左边出现了一个垂直滚动条则该属性包括滚动条的宽度默认17px。 clientLeft 不包括左外边距和左内边距 ele.clientLeft border-left-width 滚动条的宽度 ele.clientLeft 一个元素顶部边框的宽度以像素表示。不包括顶部外边距或内边距。 ele.clientTop border-top-width 函数封装 function myClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0}
} 三 offset系列的属性 1. offsetWidthoffsetHeight ele.offsetWidth 它返回该元素的像素宽度box-sizing:content-box默认情况下宽度包含该元素的水平内边距和边框除了margin以外borderpaddingwidth且是一个整数 ele.offsetHeight 它返回该元素的像素高度 box-sizing:content-box默认情况下高度包含该元素的垂直内边距和边框除了margin以外borderpaddingwidth且是一个整数 ps元素的offsetHeightoffsetWidth是一种元素CSS高度的衡量标准包括元素的边框、内边距和元素的水平滚动条或纵向滚动条如果存在且渲染的话不包含:before或:after等伪类元素的高度 offsetWidth和offsetHeight是用来得到元素的大小 offsetHeight 和 style.height的区别 demo.style.height只能获取行内样式如果样式写到了其他地方甚至根本就没写便无法获取 style.height是字符串而且带单位offsetHeight是数值 demo.style.height可以设置行内样式offsetHeight是只读属性 2. offsetLeftoffsetTop ele.offsetLeft 到距离自身最近的带有定位的父元素的 左侧 的距离,如果所有父级都没有定位则以body 为准. offsetLeft 是自身border左侧到父级padding左侧的距离 -----数值 ele.offsetTop 到距离自身最近的带有定位的父元素的 顶侧 的距离,如果所有父级都没有定位则以body 为准. ----数值 offsetLeft和offsetTop是用来得到元素的位置 offsetLeft和style.left的区别 style.left只能获取行内样式 offsetLeft只读style.left可读可写 offsetLeft是数值style.left是字符串并且有单位px 如果没有加定位style.left获取的数值可能是无效的 最大区别在于offsetLeft以border左上角为基准style.left以margin左上角为基准 计算方式从定位的父盒子的边框内部计算到子盒子的边框外部边框到边框 特点 1、offsetLeft属性没有单位是纯数值 2、offsetLeft属性是只读的不可修改 3、offsetLeft属性若有小数会四舍五入进位 3.offsetParent 获取到当前元素外面的定位父盒子 HTMLElement.offsetParent 是一个只读属性返回一个指向最近的closest指包含层级上的最近包含该元素的定位元素。如果没有定位的元素则 offsetParent 为最近的 table, table cell 或根元素标准模式下为 htmlquirks 模式下为 body。当元素的 style.display 设置为 none 时offsetParent 返回 null。 (offsetParent 很有用因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。) offsetParent和parentNode的区别 父元素parentNode一定是亲爹外面紧挨着的元素 定位父盒子offsetParent干爹有可能是亲爹也可能不是亲爹 方法 // 获取所选元素到浏览器最左边的距离 var getOffsetLeft function(obj){var tmp obj.offsetLeft;var val obj.offsetParent;while(val ! null){tmp val.offsetLeft;val val.offsetParent;}return tmp;
}//获取所选元素到浏览器最上边的距离 var getOffsetTop function(obj){var tmp obj.offsetTop;var val obj.offsetParent;while(val ! null){tmp val.offsetTop;val val.offsetParent;}return tmp;
} 转载于:https://www.cnblogs.com/sqh17/p/10217159.html
