web前端 javascript 兼容低版本 IE 6 7 8复合写法
1. 返回检测屏幕宽度(可视区域)
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
2. 阻止冒泡
w3c的方法是event.stopPropagation() proPagation 传播 传递
IE则是使用event.cancelBubble = true bubble 冒泡 泡泡 cancel 取消
兼容的写法:
JQuery 阻止时间冒泡 event.stopPropagation();//已经兼容
evevt.preventDefault();//阻止浏览器默认行为
2 if(event && event.stopPropagation)
3 {
4 event.stopPropagation(); // w3c 标准
5 }
6 else
7 {
8 event.cancelBubble = true; // ie 678 ie浏览器
9 }
获取你点击的事件源e.target==this作用类似event.stopPropagation();阻止冒泡
10 $(".box").on("click",function(e){
if(e.target==this){
alert("父盒子被点击");
} });
3.获取用户选择的内容
window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字
兼容性的写法:
if(window.getSelection)
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}
4. 得到css 样式
我们想要获得css 的样式, box.style.left box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?
1. obj.currentStyle ie opera 常用
外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)
2 .window.getComputedStyle("元素", "伪类") w3c
两个选项是必须的, 没有伪类 用 null 替代
3 兼容写法 :
我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回改属性,所有继续封装 返回当前样式的 函数。
1 var demo = document.getElementById("demo");
2 function getStyle(obj,attr) { // 谁的 哪个属性
3 if(obj.currentStyle) // ie 等
4 {
5 return obj.currentStyle[attr];
6 }
7 else
8 {
9 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
10 }
11 }
12 console.log(getStyle(demo,"width"));
web前端 javascript 兼容低版本 IE 6 7 8复合写法的更多相关文章
- Fundebug前端JavaScript插件更新至1.8.0,兼容低版本的Android浏览器
摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...
- 兼容低版本IE浏览器的一些心得体会(持续更新)
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画
ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...
- [转]AppCompat 22.1,Goole暴走,MD全面兼容低版本
AppCompat 22.1,Goole暴走,MD全面兼容低版本 分类: Android2015-04-24 09:48 1354人阅读 评论(0) 收藏 举报 android 目录(?)[+] ...
- 模拟实现兼容低版本IE浏览器的原生bind()函数功能
模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){ Function.prototype.bind=function( ...
- fragment基础 fragment生命周期 兼容低版本
fragment入门 ① 创建一个类继承Fragment 重写oncreateView方法 public class FirstFragment extends Fragment { @Overrid ...
- Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
随机推荐
- Anaconda 安装 以及conda使用
下载 https://www.anaconda.com/distribution/#macos 管理 conda 版本查看 conda --version conda 版本更新 conda updat ...
- numpy(深)复制一个矩阵的方法
在用Python写代码的时候往往会遇到真复制和假复制的问题,真复制就是创建一个新的实例(instance),而假复制就是把原对象的引用赋给了新的标志符.判断是不是真复制可以使用id()这个函数. 当然 ...
- PowerBuilder中调用NPOI进行Excel导出格式设置示例
// 功能 :新建excel带边框的单元格,格式为数字并显示为美元货币 // 参数 :ai_row,行号:ai_col,列号 // 返回值 :true/false // 作者 :潮崖之飔 // 日期 ...
- Fabric网络组织与主节点选举
一.Fabric网络组织 Fabric网络组织按如下结构组成:Fabric网络-->Channel通道-->组织(成员)-->节点.即整个网络由数个通道组成,每个通道都由多个组织构成 ...
- ImageLoader在Listview中的使用
图片加载框架之ImageLoader 1_特点 1)多线程下载图片,图片可以来源于网络,文件系统,项目文件夹assets中以及drawable中等 2)支持随意的配置ImageLoader,例如线程池 ...
- mybatis面试入门
第一步创建一个java project 导入mybatis需要的jar包,创建与数据库一一对应的javabean对象 第二步:创建mybatis的配置文件 sqlMapconfig.xml 第三步:创 ...
- python黑帽子之tcp服务端
试着用python创建一个标准的多线程tcp服务器 import socket import threading bind_ip = "0.0.0.0" bind_port = 8 ...
- 前端开发神器Charles从入门到卸载
前言 本文将带大家学习使用前端开发神器-charles,从基本的下载安装到常见配置使用,为大家一一讲解. 一.花式夸奖Charles 截取 Http 和 Https 网络封包. 支持重发网络请求,方便 ...
- 栈的顺序存储和链式存储c语言实现
一. 栈 栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储 栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...
- 创建windows窗口
from tkinter import * win=Tk() #创建窗口对象 win.title("我的第一个gu ...