JS的兼容函数
获取类名的兼容函数
//obj.getElementsByClassName 只能在现代浏览器中使用,不能在IE8以下使用
//两个参数 classname 类名 obj 范围
function getClass(classname,obj){
obj=obj||document;
if(obj.getElementsByClassName){
return obj.getElementsByClassName(classname);// 检测出能在现代浏览器中使用
}else{//在IE8及以下怎么办,获取所有的标签名
var arr=[];
var objs=obj.getElementsByTagName("*");//声明所有的标签用*
for (var i = 0; i < objs.length; i++) {//进行遍历
// if(objs.className==classname){//基本情况
if(checkClass(obj[i].className,classname)){
arr.push(objs[i]);
}
}
return arr;
}
}
//box xi sh 题中有的 用变量classname
//xi val 要找的类名 用变量val
function checkClass(classname,val){
var arr1=obj.split(" ");
for (var i = 0; i < arr1.length; i++) {
if(arr1[i]==val){
return 1;
}
}
return 0;
}
检测结果显示
<div class="box one"></div>
<div class="one"></div>
var one=getClass("one");
console.log(one.length);
将函数进行封装
//我们的目的是 div .box #box
//最后我们要用到$("div") $(".box") $("#box") function(){}
//两个参数 selector 就是div .box #box obj是范围
function $(selector,obj){
var obj=obj||document;
if(typeof selector=="string"){
selector=selector.replace(/^\s*|\s*$/g,"");
if(selector.charAt(0)=="."){
return getClass(selector.slice(1),obj);
}else if(selector.charAt(0)=="#"){
return document.getElementById(selector.slice(1));
}else if(/^[a-zA-Z][a-zA-Z0-8]{0,8}$/.test(selector)){
return obj.getElementsByTagName(selector);
}
}else if(typeof selector=="function"){
window.onload=function(){
selector();
} }
}
检测结果
<div class="box one"></div>
<div id="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
var one=getClass("one");
console.log(one.length);
var one=$("#one");
console.log(one);
var one1=$(".one");
console.log(one.length);
var one2=$("div");
console.log(one2.length);
获取样式的兼容函数
//obj.currentStyle() ie
//getComputedStyle() w3c
// 两个参数 obj对象 pro 具体的属性
function getStyle(obj,pro){
if(obj.currentStyle){
return obj.currentStyle[pro];
}else {
return getComputedStyle(obj,null)[pro];
}
}
检测结果
<div class="one"></div>
<div id="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
.one{
width:200px;
height: 200px;
background: red;
}
var one=$(".one")[0];
console.log(parseInt(getStyle(one,"width")));
JS的兼容函数的更多相关文章
- 关于js的兼容问题(小办法)!
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
- js中getByClass()函数
js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- js事件兼容处理
js封装事件处理函数,兼容ie,支持事件代理 var eventUtil = { bindEvent: function(el, type, target, callback, popgation) ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
- JS常用自定义函数总结
JS常用自定义函数总结 1.原生JavaScript实现字符串长度截取 2.原生JavaScript获取域名主机 3.原生JavaScript清除空格 4.原生JavaScript替换全部 5.原 ...
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- Node.js 教程 06 - 函数
前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...
- 关于js的回调函数的一点看法
算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...
随机推荐
- Spring @Autowired注解在utils静态工具类
[转] 使用场景:在一个静态方法中,如何使用以下注入: @Autowired private ItemMapper itemMapper; @Component public class TestUt ...
- iOS,一行代码进行RSA、DES 、AES、MD5加密、解密
本文为投稿文章,作者:Flying_Einstein(简书) 加密的Demo,欢迎下载 JAVA端的加密解密,读者可以看我同事的这篇文章:http://www.jianshu.com/p/98569e ...
- json转bean对象
一下为个人收藏,以便下次使用. 前端传的json格式为: [{"suppliercode":"gylhld_gycqlt3_gycqlt1","pro ...
- wordpress取文章时间
wordpress的时间处理, 取文章的本地时间用get_the_time('c'),其中c可以用“D, d M Y H:i:s"等替代. 取文章的UTC时间用get_post_time(' ...
- OC编码问题输出中文
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
- cmd导入导出
2:用cmd进入命令行输入:tnsping cmstar就是测试172.18.13.200是否连接成功3:导入与导出,如下: 数据导出: 1 将数据库TEST完全导出,用户名system 密码mana ...
- Java基础——基本类型和包装类、基本类型和字符串之间的转换
基本类型和包装类之间的转换 基本类型和包装类之间经常需要互相转换,以 Integer 为例(其他几个包装类的操作雷同哦): 在 JDK1.5 引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更 ...
- 20145320GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析 在这里首先感谢卢肖明的分析博客,为后面的同学减少了很多分析的负担. 分析过程 使用gcc - g example.c -o example -m32指令在64位的机器上产生 ...
- LL基本姿势
在说怎么练习之前,先说说LL这个游戏里面的一些基本概念: 谱面元素(element) 谱面由一个个的音符组成,在LL中,音符(Note)分以下三类: 单点(下简称S,Single),同一时刻只有一个圆 ...
- Python爬虫学习
lxml相关 http://blog.csdn.net/kl28978113/article/details/52241678 lxml安装 http://www.lfd.uci.edu/~gohl ...