IE6、IE7兼容querySelectorAll和querySelector方法-最终版本
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 方法很好用,可惜IE6、IE7不支持,怎么让IE6、IE7也支持querySelectorAll和querySelector这两个方法呢,请看下面的代码:
if (!document.querySelectorAll) {
document.querySelectorAll = function (selectors) {
var style = document.createElement('style'), elements = [], element;
document.documentElement.firstChild.appendChild(style);
document._qsa = []; style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
window.scrollBy(0, 0);
style.parentNode.removeChild(style); while (document._qsa.length) {
element = document._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}
document._qsa = null;
return elements;
};
} if (!document.querySelector) {
document.querySelector = function (selectors) {
var elements = document.querySelectorAll(selectors);
return (elements.length) ? elements[0] : null;
};
} // 用于在IE6和IE7浏览器中,支持Element.querySelectorAll方法
var qsaWorker = (function () {
var idAllocator = 10000; function qsaWorkerShim(element, selector) {
var needsID = element.id === "";
if (needsID) {
++idAllocator;
element.id = "__qsa" + idAllocator;
}
try {
return document.querySelectorAll("#" + element.id + " " + selector);
}
finally {
if (needsID) {
element.id = "";
}
}
} function qsaWorkerWrap(element, selector) {
return element.querySelectorAll(selector);
} // Return the one this browser wants to use
return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
})();
参考资料:
qsa-polyfill-ie7.js
How to add querySelectorAll() function to Element for IE <= 7?
querySelector.polyfill.js
IE6、IE7兼容querySelectorAll和querySelector方法-最终版本的更多相关文章
- IE6、IE7兼容querySelectorAll和querySelector方法
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 复制代码 代码如下: <!Do ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10(转)
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html&g ...
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10(转载)
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...
- 网页头一定要加的代码段(加注版)一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
网页头部常见的一段代码 <!--[if lt IE 7 ]><html class="ie6"><![endif]--> <!--[i ...
- 记录各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
记录遇到的IE BUG: 1.IE8开发者工具打不开 解决办法:IE8新增了开发人员工具,非常不错,比早期的DevToolbar好用多了.不过在我的Win7下 使用的时候偶尔会出现一个莫名其妙的问 ...
- 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
- (转)一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
原文链接 http://blog.csdn.net/h5_queenstyle12/article/details/50424862 百度源代码如下 <!Doctype html> < ...
随机推荐
- 1.Java基础之System对象
毕向东老师Java基础学习笔记——System对象 今天学习Java中的System对象后,感觉这个对象对我们主要有以下几点用处. 1.获取当前操作系统版本和类型. 2.获取当前操作系统的path中的 ...
- C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: #ifndef SNAKE #define SNAKE #include<windows.h> #include< ...
- 当shiro不进入自定义realm的权限认证方法时
需要加入下面的一个bean @Bean public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator(){ DefaultAdvisorA ...
- Windows 7 Python 3.5 及 django 1.8 的安装
本文参考:http://www.runoob.com/django/django-first-app.html 1.下载 安装 python 3.5 可以自定义安装位置 ,勾选设置环境变量Path 默 ...
- Class.forName("com.mysql.jdbc.Driver") ;
try { Class.forName("com.mysql.jdbc.Driver") ; } catch(ClassNotFoundException e) { System. ...
- php实现设计模式之 原型模式
<?php /* * 原型模式:通过复制已经存在的对象来创建新对象. * 通过原型实例指定创建对象的种类,并且通过copy这些原型创建信的对象 * 是创建型模式 * 有的时候创建一个对象有很多步 ...
- JAVAScript柯里化、部分应用参数终极理解
一.柯里化 在定义柯里化.部分应用参数的概念前,首先必须对闭包有深入的了解和定义,闭包一句话说清楚:函数返回值为函数. 柯里化的定义:将多参函数分解为按步骤接受单个参数的函数,如下代码: var mo ...
- jquery.datatables中文使用说明
http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方 ...
- checkbox & radio 的对齐问题
不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样. 重置 form checkbox & radio 因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还 ...
- Windows8.1下安装NoSQL-- mongodb安装使用
1. 官方下载monodb:http://www.mongodb.org/downloads 现在最新版本3.0 2. 以下载Windows 64-bit为例官方最新版的没有分开, 32位和64位是应 ...