专栏首页HTML5学堂HTML5-类库系列 事件与获取完成版样式

HTML5-类库系列 事件与获取完成版样式

HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:获取渲染后样式以及事件兼容处理。渲染后样式修正了通过style属性获取样式的不足,而事件兼容问题主要考虑了this的指向修正。

获取完成(渲染后)样式

在IE下,对于获取渲染后的样式,使用currentStyle进行获取,而对于FF,使用的是getComputedStyle方法进行获取。两者的语法并不相同。元素.currentStyle[属性],也可以用点语法进行书写;而getComputedStyle采用的则是document.defaultView.getComputedStyle(元素, 伪类)[属性]的方式,如果我们不需要获取元素伪类的样式,伪类的位置可以用null来替换。因此在这里我们需要创建一个函数用于兼容不同浏览器,实现渲染后样式的获取。

对于document.defaultView.getComputedStyle(),其实等价于window.getComputedStyle()。其原因在于getComputedStyle本身就存在window对象之中。根据DennisHall的说法,使用defaultView可能一是人们不太乐意在window上专门写个东西,二是让API在Java中也可用。但是在以前3.6版本的火狐浏览器当中,对于获取frame框架样式则仅仅支持document.defaultView的获取方式。不过对于现在,我们完全可以不考虑,原因很简单,从HTML5出现之后,frame以及frameset等标签均被从推荐标准中删除了。当然还有一个原因,就是没有人再去用3.6版本的火狐了~

关于document.defaultView.getComputedStyle()方法的兼容问题:IE6~8不予以支持,需要注意~!

关于第二个参数的兼容问题:IE以及Opera均不支持(因此,我们大可不必书写第二个参数,可以写null,也可以直接省略)

具体支持程度请看下图:

/*
* 功能:兼容不同浏览器,获取渲染后样式
* 参数:需要传递元素以及需要获取的当前元素样式属性
* author: 独行冰海 - 利利 - HTML5学堂
* 调用范例: getStyle(con, 'height');
*/
function getStyle(element, proName){


var eleStyle;
if(!document.defaultView){
eleStyle = element.currentStyle[proName];
} else {
eleStyle = document.defaultView.getComputedStyle(element, null)[proName];
}
return eleStyle;
}

事件的兼容问题

在DOM2级当中,提出了事件绑定的新方法-事件侦听器-addEventListener和attachEvent,可是,由于浏览器在事件流的支持程度问题,导致了事件上的兼容问题。在此前的博文当中其实已经总结过DOM2级中存在的兼容问题以及处理办法,这次再次拿出事件绑定和事件移除两种功能来说,并非老调重弹,而是要在之前的代码基础上更进一步~哪一步呢?我们都知道addEventListener和attachEvent两种方法的主要区别是,前者传递的是3个参数,而后者传递的是两个参数,前者第一个参数使用的是事件的名字(click),而后者采用的是事件的绑定(onclick),前者支持事件冒泡和事件捕获,而后者仅仅支持事件冒泡,因此也就省略了最后一个参数。

这些区别都是我们曾经思考过的,然而一直没有去思考的是他们另一点区别,同样是事件绑定,但是功能函数中的this指向是不相同的,从代码构建的角度来说,应当进行合理的修正,因此我们今天的“再进一步”,就是要修正this指向。不多说了,上代码:

/*
*
* 移除事件监听器 removeEvent(con, 'click', functionName);
* author: 独行冰海 - 利利 - HTML5学堂
*/
function removeEvent(obj, eventName, fn){
if (obj.removeEventListener) {
obj.removeEventListener(eventName, fn, false);
} else {
obj.detachEvent('on' + eventName, function(){
// 修正this指向的问题 由于移除后没有事件,因此无需修正this
return fn;
});
}
}

结束~~~

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-12-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用JavaScript获取浏览器计算后的样式

    HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用...

    HTML5学堂
  • 2000! | 看上去如此简单的面试题,让太多“前端”英雄好汉折戟

    HTML5学堂-码匠:求某个数字的阶乘,很难吗?看上去这道题异常简单,却不曾想里面暗藏杀机,让不少前端面试的英雄好汉折戟沉沙。 面试真题题目 如何求“大数”的阶...

    HTML5学堂
  • Cookie的路径以及Cookie域

    HTML5学堂:在之前的文章《使用cookie实现换肤功能》当中,曾经介绍过关于cookie的用法,也书写了一个简单的demo,在这篇文章当中,主要针对cook...

    HTML5学堂
  • 零基础入门必备的Linux命令和C语言基础

      touch -t 0712250000 file1 修改一个文件或目录的时间戳 - (YYMMDDhhmm)

    用户6754675
  • Linux入门所必备的Linux命令和C语言基础

    touch -t 0712250000 file1 修改一个文件或目录的时间戳 - (YYMMDDhhmm)

    用户6754675
  • 玩转linux 这些命令就够了

    现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

    互扯程序
  • (转载)常用shell命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecod...

    solve
  • 更多的常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecod...

    爱学习的孙小白
  • (5.2)James Stewart Calculus 5th Edition:The Definite Integral

    我们可以发现对应的每段的中点为: 1.1,.13,1.5,1.7,1.9 所以,对应的面积大致为:

    dodo_lihao
  • Linux常用命令100个用法

    平时用linux时,我有一个习惯就是把遇到的,比较有用,并且容易忘的命令,放到一个文本文件中,没事的时候可以拿出来看看,这样可以加深映像,时间长了这些命令的用法...

    I Tech You_我教你

扫码关注云+社区

领取腾讯云代金券