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> < ...
随机推荐
- 使用Visual Studio 2015 Community 开发windows服务
昨天研究在.NET下开发Windows服务程序,期间遇到一些小问题,这里仅将自己的开发过程和需要注意的地方写下和广大网友分享…… 1.基础 Windows服务是指系统启动时能够自己运行的程序.W ...
- Chrome 控制台实用指南
前言 个人博客:Damonare的个人主页 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大 ...
- 在 Git 中 Checkout 历史版本
昨天写代码的时候,误删了一个文件.今天发现的时候,commit 已经 push 到版本库了.本想用 git reset 回退版本,找回文件后重新提交.但是想起 Git 是一个版本控制系统哎,直接从版本 ...
- C#使用iTextSharp给PDF添加水印
代码: /// <summary> /// 添加普通偏转角度文字水印 /// </summary> public static void SetWatermark(string ...
- Android网络编程1
最近在自学Android开发,从这篇开始作为我学习android开发的笔记,来记录学习过程中遇到的问题点和其解决的方法: Ui界面代码 <?xml version="1.0" ...
- C#基础-技术还债3-枚举【pending】
/// <summary> /// 声明三方查询类型可以关联的查询对象类型 /// </summary> [AttributeUsage(AttributeTargets.Fi ...
- iOS阶段学习第34天笔记(UI小组件 UISegment-UISlider-UIStepper-UIProgressView-UITextView介绍)
iOS学习(UI)知识点整理 一.UI小组件 1.UISegmentedControl 分段选择器 实例代码 - (void)viewDidLoad { [super viewDidLoad]; / ...
- 微信JSApi支付~坑和如何填坑
返回目录 微信一直用着不爽,这几天研究它的jsapi支付,即在微信内打开H5页面,完成支付的过程,在这个过程中,你将会遇到各种各样的问题,而大叔将把这些问题的解决方法写一下,希望可以给你带来帮助! 一 ...
- 虚拟机安装ubuntu问题解决办法
vmware workstation 10安装ubuntu 13.10看不到下一步,如图所示 解决办法:如果不能调整安装程序的窗口大小,就按住Alt往上托窗口,应该就可以看到右下方的"下一步 ...
- a标签 不触发 目标链接
1. a 标签 点击时 页面回调转到href制定的页面 <a href="www.baidu.com">go to baidu</a> 2. 加上oncli ...