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 相关文章推荐
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
javascript解析json格式的数据方法详解
Aug 07 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
PHP的FTP学习(四)
2006/10/09 PHP
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python3去掉string中的标点符号方法
2019/01/22 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python与mysql数据库交互的实现
2020/01/06 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
网吧消防安全制度
2014/01/28 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
关于做家务的心得体会
2016/01/23 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL
MySQL数据管理操作示例讲解
2022/12/24 MySQL