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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
JS实现可控制的进度条
Mar 25 Javascript
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
ADODB的数据库封包程序库
2006/12/31 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
JS实现打砖块游戏
2020/02/14 Javascript
vue实现计算器功能
2020/02/22 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python中模块string.py详解
2017/03/12 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python3 合并二叉树的实现
2019/09/30 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
力学专业毕业生自荐信
2013/11/17 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
本科毕业生自荐信
2014/05/26 职场文书
数学系毕业生求职信
2014/05/29 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS