js,jq获取元素位置属性及兼容性写法
网页被卷起来的高度/宽度
document.documentElement.scrolltop //火狐 和 其他浏览器
document.body.scrolltop //ie,谷歌浏览器和没有声明DTD
window.pageYOffset window.pageYOffset // ie9+ 和 最新浏览器
$(window).scrollTop()
元素距离文档顶端和左端的偏移量
dom元素.offsetTop //chrome,ie 子盒子到定位的父盒子边框到边框的距离
dom元素.offsetLeft //chrome,ie
jq对象.offset().top
jq对象.offset().left
获取元素的宽度,高度
dom元素.clientWidth //width+padding
dom元素.clientHeight
dom元素.offsetWidth // width+padding+border
jq对象.width()
jq对象.height()
获取窗口的大小
window.innerWidth //ie9+及最新,谷歌
document.documentElement.clientWidth //标准浏览器
document.body.clientWidth 怪异浏览器
$(window).width();
js,jq获取元素位置属性及兼容性写法的更多相关文章
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- Selenium2学习-031-WebUI自动化实战实例-029-JavaScript 在 Selenium 自动化中的应用实例之四(获取元素位置和大小)
通过 JS 或 JQuery 获取到元素后,通过 offsetLeft.offsetTop.offsetWidth.offsetHeight 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参 ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
随机推荐
- java多线程安全问题 静态函数的修饰
/* 如果同步函数被静态修饰后,使用的锁是什么呢? 通过验证,发现不在是this.因为静态方法中也不可以定义this. 静态进内存是,内存中没有本类对象,但是一定有该类对应的字节码文件对象. 类名.c ...
- Asp.Net MVC学习总结(一)——Asp.Net MVC简单入门
一.MVC简单入门 1.1.MVC概念 视图(View) 代表用户交互界面,对于Web应用来说,可以概括为HTML界面,但有可能为XHTML.XML和Applet. 模型(Model) 表示用户对其数 ...
- hibernate注解的简单应用
注解代替了我们用的*.hbm.xml文件.简少了我们的代码量:应用简单. @Override 用途:重写父类的同名方法 单元测试注解 @Test 用途:用于测试 @Before 用途:单测方法走之前执 ...
- Java三大修饰符
1.static 修饰: 修饰属性:类变量,全类共有 修饰方法:静态方法,静态方法中不能直接访问非静态的方法和属性 静态方法只能被静态方法覆盖,并且没有多态 静态的方法或者属性不依赖于对象:类名.方法 ...
- js设计模式--单体模式
GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...
- Django实现用户注册登录
学习Django中:试着着写一个用户注册登录系统,开始搞事情 =====O(∩_∩)O哈哈~===== ================= Ubuntu python 2.7.12 Django 1. ...
- loadrunner测试结果分析
LR性能测试结果样例分析 测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源 ...
- 记一个Java错误 1 -- Unsupported major.minor version 52.0
今天打开ADT eclipse 准备调试上周的安卓项目, 发现总是报错 如图: 百度了一下说是 jdk版本过低的问题 (低版本的jre运行高版本project) 于是就修改了一下 window - ...
- 每天一个Linux命令(09)--touch命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1.命令格式: touch [选项]··· 文件··· 2.命令参数: -a 或 ...
- MYSQL中添加时间
1.在创建新记录和修改现有记录的时候都对这个数据列刷新:TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 2.在创建新记录 ...