Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3


Posted in Javascript onMarch 22, 2008

var patterns = {
    HYPHEN: /(-[a-z])/i,
    ROOT_TAG: /^body|html$/i
};

var toCamel = function(property) {
    // 如果没有 -[a-z] 字母,则直接返回
    if ( !patterns.HYPHEN.test(property) ) {
        return property;
    }

    // 如果有缓存,直接返回替换后的值
    if (propertyCache[property]) {
        return propertyCache[property];
    }

    // 使用正则替换
    var converted = property;
    while( patterns.HYPHEN.exec(converted) ) {
        converted = converted.replace(RegExp.$1,
                RegExp.$1.substr(1).toUpperCase());
    }

    // 存入缓存
    propertyCache[property] = converted;
    return converted;
};在 YAHOO.util.Dom 中,getStyle 函数考虑了更多不同浏览器兼容性方面的问题,代码如下

// 使用 W3C DOM 标准的浏览器,比如 Firefox、Opera、Safari
if (document.defaultView && document.defaultView.getComputedStyle) {
    getStyle = function(el, property) {
        var value = null;

        // 重命名部分 CSS 样式名
        if (property == 'float') {
            property = 'cssFloat';
        }

        // 获取通过 CSS 加上去的属性
        var computed = document.defaultView.getComputedStyle(el, '');
        if (computed) {
            value = computed[toCamel(property)];
        }

        return el.style[property] || value;
    };
// 如果是 IE 浏览器
} else if (document.documentElement.currentStyle && isIE) {
    getStyle = function(el, property) {                         
        switch( toCamel(property) ) {
            // “转换”名称为 IE 可以认识的
            case 'opacity' :
                var val = 100;
                try {
                    val = 
                        el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
                } catch(e) {
                    try {
                        val = el.filters('alpha').opacity;
                    } catch(e) {
                    }
                }
                // 百分比
                return val / 100;
            case 'float': 
                property = 'styleFloat'; 
            default: 
                var value = el.currentStyle ? el.currentStyle[property] : null;
                return ( el.style[property] || value );
        }
    };
} else {
    // 获取内联样式
    getStyle = function(el, property) { return el.style[property]; };
}另外,PPK 在他的 Blog 上的有关 getStyle 的阐述,也很精彩,有兴趣的可以去看下。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
JavaScript 继承使用分析
May 12 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 #Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 #Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 #Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 #Javascript
Javascript的一种模块模式
Mar 22 #Javascript
javascript cookie解码函数(兼容ff)
Mar 17 #Javascript
简单的JS多重继承示例
Mar 13 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
PHP基础知识回顾
2012/08/16 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
详解vue 组件
2020/06/11 Javascript
Python常用小技巧总结
2015/06/01 Python
Python实现的最近最少使用算法
2015/07/10 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python函数与方法的区别总结
2019/06/23 Python
python日期相关操作实例小结
2019/06/24 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
计划生育标语
2014/06/23 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
解除同居协议书
2015/01/29 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书