clientTop,scrollTop，兼容

【clientTop,scrollTop，兼容】的更多相关文章

input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化前端必知的ajax 简单理解同步与异步那些年，我们被耍过的bug——has

input屏蔽历史记录设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号,在前面加分号可以有多种用途:1.防止多文件集成成一个文件后,高压缩出现语法错误.2.这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})().3.因为undefined是window的属性…

clientTop,scrollTop，兼容

在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } }else if(document.compatMode ===…

clientTop scrollTop offsetTop

关于top.clientTop.scrollTop.offsetTop的用法网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: docu…

获取scrollTop兼容各浏览器的方法，以及body和documentElement

1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop: Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接用 docum…

【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？

1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop: Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接用 docum…

scrollTop兼容处理

使用jQuery2.0以下版本的scrollTop()函数来设置当然兼容性当然很好,但有时需要为滚动设置滑动效果.比如,使用animate函数,这里需要做些兼容性处理: 实例:http://sandbox.runjs.cn/show/pji9exa3 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Doc…

关于scrolltop 兼容 IE6/7/8, Safari,FF的方法

1.各浏览器下 scrollTop的差异IE6/7/8:对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 :对于有doctype声明的页面则可以使用 document.documentElement.scrollTop :Safari:safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset :Firefox:火狐等等相对标准些的浏览器就省心多了,直接用 document.d…

document.body.scrollTop与document.documentElement.scrollTop兼容

这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声明(即网页第一句的docType)的情况下,标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop. 由于在不同情况下,document…

onsrcoll和scrollTop兼容与实现

对于onscroll事件的支持各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存在差异就是我们常说的浏览器兼容性问题,就是说,对于不同浏览器可能不会按照预期触发相应的事件处理函数. IE6 IE7 IE8 Firfox Chrome Safari Opera Q S Q S Q S Q S Q S Q S Q S window 对象 Y Y Y Y Y Y Y Y Y…

scrollTop兼容封装

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height: 3000px; } </style> </head> <body> </body> </html> <script&…

scrollTop 值为 0

由scrollTop兼容问题引起: 在 Firefox 和 IE 中,使用 document.documentElement.scrollTop 获取: 在 Chrome 中,使用 document.body.scrollTop获取. 修复: // 原生js var sTop = document.body.scrollTop || document.documentElement.scrollTop; // jQuery $("html,body").scrollTop(); $(d…

js，jQuery实现可关闭悬浮框广告特效，兼容（谷歌，火狐，Ie）

注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l…

scrollTop的兼容性

各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop: Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接用 document…

安排~~炒鸡全的JS兼容问题，码上-----【XUEBIG】

如何处理兼容问题如果两个都是属性,用逻辑||做兼容如果有一个是方法,用三元做兼容如果是多个属性或方法,封装函数做兼容两个小知识点: 1.取消拖拽的默认行为: document.ondragstart = function(){ return false } 2.阻止右键菜单的默认行为: document.oncontextmenu = function(){ return false } 兼容问题: 一.运用逻辑运算符||做的相关兼容 1.关于获取滚动高度的不兼容问题 IE,Chr…

js 浏览器兼容问题及解决办法

JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式: IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ ale…

HTML中常见的各种位置距离以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度二.DOM中的坐标系下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client…

JavaScript offset、client、scroll家族

offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- offset demension 偏移量定位父级 offsetParent 如果没有定位找body offsetLeft offsetTop offsetHeight offset…

浏览器兼容性-JS篇

总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addEventListener(event,fn,fase); }else{ obj.attachEvent("on"+event,fn); } } 小结:addEventListener()兼容firefox.chrome.safari.opera.IE9+ attachEvent()兼容IE…

HTML元素坐标定位，这些知识点得掌握

文档坐标和视口坐标视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言.例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元素的Y坐标为200px – 75px = 125px. 如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值,除IE8以及更早的版本.IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置.…

js兼容性问题总结

JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式: IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ aler…

我所理解的ECMAScript、DOM、BOM---写给新手们

像很多新手一样,我知道js有三部分组成,即ECMAScript.DOM.BOM三部分组成,ECMAScript是核心解释器.DOM(Document Object Model)是文档对象模型.BOM(Browser Object Model)是浏览器对象模型,但是我并没有完全理解其中的含义,还是会经不住去问:它们到底是什么?所以今天我和好朋友坐下来好好探讨了一下,来弥补这个小小的漏洞,如果有哪些不对的地方,还望看到的朋友指正: ECMAScript也是一种语言,它本身不包含输入输出定义:ECMA…

JS判断鼠标移入元素的方向

最终效果这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect…

js实现上下滑动侧边栏

给一个原先的电子商务网站做修改,客户说想将原先上下滑动侧边栏改的更加人性化,希望将原先匀速滑动的侧边栏改成变速运动的侧边栏,在到达目的地之前速度越变越慢. 原先一开始的时候,,这个图片是硬生生地到达可视区的中点,看得有点愣愣傻傻的. 原先的代码是这样: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit…

DOM，BOM

1.DOM:文档对象模型(Document Object Model) 1)子节点:只是这一代的后代,不会计算后代的后代 1.childNodes:获取子节点, --IE6-8:获取的是元素节点,正常 --高版本浏览器:但是会包含文本节点和元素节点(不正常) 2.nodeType:节点的类型 --nodeType=3-->文本节点 --nodeTyPE=1-->元素节点所以获取元素节点兼容的方法: for(var i=0;i<oUL.child…

jQuery系列：N种方法大总结

jquery自定义属性,区分prop()和attr() jQueryObject.prop( propertyName [, value ] ):为添加,获取属性(property),并非attribute. jquery 1.6新增. jquery:prop()和attr()的主要区别: prop()函数针对的是DOM元素(JS Element对象)的属性, attr()函数针对的是DOM元素所对应的文档节点的属性. js:property和attribute的主要区别: 1.(隐式)docu…

JavaScript获取DOM元素位置和尺寸大小

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clien…

深入了解overflow

1.如果overflow-x与overflow-y值不同其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto 2.overflow:visible妙用 IE7下,文字越多,按钮两侧的padding留白就越大!-bug 解决办法:<button sytle="overflow:visible"></button> 3.overflow与滚动条无论什么浏览器,默认滚动条均来自html…

原生js实现回到顶部

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: document.b…

获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scroll…

常用数组、字符串方法总结&获取元素、DOM操作

字符串的方法.返回值.是否改变原字符串:1 charAt() 方法可返回指定位置的字符. 不改变原始字符串 JavaScript并没有一种有别于字符串类型的字符数据类型,返回的字符是长度为 1 的字符串: 注释:字符串中第一个字符的下标是 0.如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串. 2 concat() 方法用于连接两个或多个字符串并返回连接后的字符串不改变原始字符串语法:stringObject.concat(stringX,str…