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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
js基于canvas实现时钟组件
Feb 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 实用代码收集
2010/01/22 PHP
php生成zip文件类实例
2015/04/07 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
怎样写留学自荐信
2013/11/11 职场文书
通用自荐信范文
2014/03/14 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
小学见习报告
2014/10/31 职场文书
2014年工程部工作总结
2014/11/25 职场文书
中秋节感想
2015/08/10 职场文书
婚宴祝酒词大全
2015/08/10 职场文书