1. //获取浏览器可视区宽度
  2. function getWidth() {
  3. if (window.innerWidth){
  4. return window.innerWidth;
  5. }
  6. else{
  7. if (document.compatMode == "CSS1Compat"){
  8. return document.documentElement.clientWidth;
  9. }
  10. else{
  11. return document.body.clientWidth;
  12. }
  13. }
  14. }
  15. // 简写
  16. // function getWidth(){
  17. // return window.innerWidth || document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
  18. // }
  19.  
  20. //获取浏览器可视区高度
  21. function getHeight() {
  22. if (window.innerHeight){
  23. return window.innerHeight;
  24. }
  25. else{
  26. if (document.compatMode == "CSS1Compat"){
  27. return document.documentElement.clientHeight;
  28. }
  29. else{
  30. return document.body.clientHeight;
  31. }
  32. }
  33. }
  34. // 简写
  35. // function getHeight(){
  36. // return window.innerHeight || document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
  37. // }
  38.  
  39. //获取浏览器卷曲高度
  40. function getscrollTop() {
  41. if (document.documentElement.scrollTop){
  42. return document.documentElement.scrollTop;
  43. }
  44. else{
  45. return document.body.scrollTop;
  46. }
  47. }
  48. // 简写
  49. // function getscrollTop() {
  50. // return document.documentElement.scrollTop || document.body.scrollTop;
  51. // }
  52. // function getscrollTop() {
  53. // return document.documentElement.scrollTop + document.body.scrollTop;
  54. // }
  55.  
  56. function $(id){
  57. return document.getElementById(id);
  58. }
  59.  
  60. // 由于getElementsByClassName()方法有兼容性问题 (IE8以下不兼容)
  61. // 所以利用getElementsByTagName()方法封装一个函数模拟ByClassName函数功能
  62. // 参数: class类名
  63. // 返回值:匹配到的所有元素节点
  64. function getClassName(cName){
  65. var all = document.getElementsByTagName("*");
  66. var arrays = new Array();
  67. for(var i = 0; i < all.length; i++){
  68. if (all[i].className == cName){
  69. arrays.push(all[i])
  70. }
  71. }
  72. return arrays;
  73. }
  74.  
  75. // 获取元素非行间样式的值
  76. // 参数1:元素节点
  77. // 参数2:属性名
  78. function getStyle(element, attrName){
  79. if (element.currentStyle) {
  80. return element.currentStyle[attrName];
  81. }
  82. else{
  83. return window.getComputedStyle(element, null)[attrName];
  84. }
  85. }
  86.  
  87. // 返回元素的子节点(过滤掉空白文本 以及 注释节点后的)
  88. // 参数:元素节点
  89. // 返回值: 元素节点的子集节点
  90. function getChildNodes(element){
  91. var eList = element.childNodes;
  92. var arrays = new Array();
  93. for (var i = 0; i < eList.length; i++) {
  94. if (eList[i].nodeType == 1) { //元素节点:1 属性节点:2 文本节点:3 注释节点:8
  95. arrays.push(eList[i])
  96. }
  97. }
  98. return arrays;
  99. }
  100.  
  101. // 返回元素的第一个子节点 (过滤掉空白文本 以及 注释节点后的)
  102. // 参数:元素节点
  103. // 返回值: 元素节点的第一个子元素节点
  104. function getFirstChild(element){
  105. var eList = element.childNodes;
  106. var firstChild = null;
  107. for (var i = 0; i < eList.length; i++) {
  108. if (eList[i].nodeType == 1) {
  109. firstChild = eList[i];
  110. break;
  111. }
  112. }
  113. return firstChild;
  114. }
  115.  
  116. // 返回元素的最后一个子节点 (过滤掉空白文本 以及 注释节点后的)
  117. // 参数:元素节点
  118. // 返回值: 元素节点的最后一个子元素节点
  119. function getLastChild(element){
  120. var eList = element.childNodes;
  121. var lastChild = null;
  122. for (var i = eList.length - 1; i >= 0; i--) {
  123. if (eList[i].nodeType == 1) {
  124. lastChild = eList[i];
  125. break;
  126. }
  127. }
  128. return lastChild;
  129. }
  130.  
  131. // 返回元素的上一个同级节点
  132. // 参数: 元素节点
  133. // 返回值: 元素的上一个同级节点
  134. function getPreviousSibling(element){
  135. var obj = element.previousSibling;
  136. while (obj != null && obj.nodeType != 1){ //循环会在指定条件为真时循环执行代码块。
  137. obj = obj.previousSibling;
  138. }
  139. return obj;
  140. }
  141.  
  142. // 返回元素的下一个同级节点
  143. // 参数: 元素节点
  144. // 返回值: 元素的下一个同级节点
  145. function getNextSibling(element){
  146. var obj = element.nextSibling;
  147. while (obj != null && obj.nodeType != 1){ //循环会在指定条件为真时循环执行代码块。
  148. obj = obj.nextSibling;
  149. }
  150. return obj;
  151. }
  152.  
  153. // 原理:由于e.pageY和pageX这个属性在IE低版本中不支持(8及以下),所以利用可视区鼠标的位置加上滚动条卷曲高度来获取基于内容区的鼠标的位置
  154. // 作用:获取鼠标相对内容区的鼠标Y轴位置
  155. // 参数:相对可视区的鼠标位置 (e.pageY)
  156. // 返回值:相对内容区的鼠标位置
  157. function getPageY(y){
  158. return y + document.documentElement.scrollTop + document.body.scrollTop;
  159. }
  160.  
  161. // 封装dom 2级事件,添加卸载的函数
  162. // 参数:
  163. // 1:操作的元素
  164. // 2:事件类型 (去掉on后)
  165. // 3:执行的非匿名函数
  166. // 4:捕获/冒泡(true/false)
  167. // 添加事件
  168. function addEvent(element, type, fn, method){
  169. if (element.addEventListener){
  170. element.addEventListener(type, fn, method)
  171. }
  172. else{ //IE浏览器 8 级以下
  173. element.attachEvent("on" + type, fn);
  174. }
  175. }
  176. // 卸载事件
  177. function delEvent(element, type, fn, method){
  178. if (removeEventListener) {
  179. element.removeEventListener(type, fn, method);
  180. }
  181. else{
  182. element.detachEvent("on" + type, fn)
  183. }
  184. }
  185.  
  186. // e.target 获取拥有该事件对象的本身,等同于this 非IE浏览器使用
  187. // e.srcElement 获取拥有该事件对象的本身,等同于this IE浏览器使用
  188. // e.type 获取该事件类型
  189.  
  190. // 作用: 阻止事件默认行为
  191. // 参数:事件源对象
  192. function myPreventDefault(eobj){
  193. if (eobj.preventDefault){
  194. eobj.preventDefault(); //IE8以上,及火狐谷歌等
  195. }
  196. else{
  197. eobj.returnValue = false; //ie8及以下
  198. }
  199. }
  200.  
  201. // 作用: 阻止事件冒泡
  202. // 参数: 事件源对象
  203. function myStopPropagation(eobj) {
  204. if (eobj.stopPropagation){
  205. eobj.stopPropagation(); //非IE 下阻止事件冒泡的方法
  206. }
  207. else{
  208. eobj.cancleBubble = true; //IE8及以下浏览器阻止事件冒泡
  209. }
  210. }
  211.  
  212. // 作用: 判断鼠标左右键
  213. function getMouseDirection(e){
  214. e = e || event;
  215. //e.button === 0 IE高版本(9以上)火狐谷歌
  216. //e.button === 1 IE低版本 8及以下
  217. if (e.button === 0 || e.button === 1){
  218. return "左键";
  219. }
  220. if(e.button === 2){
  221. return "右键";
  222. }
  223. }
  224.  
  225. // 封装cookie
  226. // 设置cookie
  227. // 参数: 1:键名 2:键值 3.过期时间(可传可不传)
  228. function setCookie(key, value, dateTime){
  229. var cValue = key + "=" + encodeURIComponent(value); //编码(防止中文)
  230. if (dateTime){
  231. cValue += ";expires=" + dateTime;
  232. }
  233. document.cookie = cValue;
  234. }
  235. // 获取cookie
  236. function getCookie(key){
  237. var arr = document.cookie.split("; ");
  238. var keyValue = "";
  239. for (var i = 0; i < arr.length; i++){
  240. var keyName = arr[i].split("=")[0];
  241. if (keyName === key){
  242. keyValue = arr[i].split("=")[1];
  243. break;
  244. }
  245. }
  246. return decodeURIComponent(keyValue); //解码 (防治中文)
  247. }
  248. //删除cookie
  249. function delCookie(key){
  250. document.cookie = key+"=expires=" + new Date(0);
  251. }

未完,待续...

JS 兼容大全的更多相关文章

  1. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  2. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  3. JS正则表达式大全

    转自:http://wenku.baidu.com/link?url=3y930kC7F6D3wQdMjQ3fVDmiA9Wfebs_QK0UB3N3mFaEoKg4ytZORPopxufeYA6si ...

  4. 实用js代码大全

    实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...

  5. io.js - 兼容 NPM 平台的 Node.js 新分支

    io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...

  6. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...

  7. js代码大全

    超级实用且不花哨的js代码大全 事件源对象event.srcElement.tagNameevent.srcElement.type 捕获释放event.srcElement.setCapture() ...

  8. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  9. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

随机推荐

  1. Java 源程序与编译型运行区别

  2. java 之DelayQueue实际运用示例

    在学习Java 多线程并发开发过程中,了解到DelayQueue类的主要作用:是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走. ...

  3. Java设计模式(三)单例模式

    一.场景描述 在采集到仪器数据后,需要将数据发送到lims系统中,通过调用lims系统服务实现数据的上传. 在仪器数据采集组件中实现lims系统服务代理,该代理需要指定服务地址url,认证信息(用户名 ...

  4. Rafy中的IOC

    Rafy是什么可以通过下面博客来了解 Rafy 领域实体框架演示(3) - 快速使用 C/S 架构部署 - BloodyAngel - 博客园 以下是看源码中的一点记录,供以后学习使用 主要是Rafy ...

  5. (mysql)找不到请求的 .Net Framework Data Provider。可能没有安装

    webconfig配置以下节点(注意版本号) <system.data> <DbProviderFactories> <add name="MySQL Data ...

  6. Spring 中使用XML配置方式和使用注解方式实现DI

    Spring容器给我们提供了很好的环境,我们只关注主要业务即可,其他的无需关注太多.今天刚学的DI DI(Dependency Injection):依赖注入 使用XML配置文件完成依赖注入 1.1普 ...

  7. javascript中让你捉摸不定的this

    this到底指向谁,估计很多人在使用javascript的过程中都遇到过,这个关键字如果没搞懂,在一些高级功能中都会困难重重,搜了下相关文章,介绍的都挺多的,也有很深入的,比如汤姆大叔的<深入理 ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. ORACLE EXPDP命令使用详细

    相关参数以及导出示例: 1. DIRECTORY 指定转储文件和日志文件所在的目录DIRECTORY=directory_objectDirectory_object用于指定目录对象名称.需要注意,目 ...

  10. Linux安装Tomcat服务器发布项目教程

    前面小Alan跟大家聊了在Linux服务器上jdk运行环境的安装以及redis非关系型数据库的安装,今天继续跟大家聊聊Tomcat的安装,以及将我们的项目发布上去并成功的访问. 第一步:将tomcat ...