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在网页中实现分隔条功能的代码
Aug 09 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript Array.remove() 数组删除
2009/08/06 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
python编程线性回归代码示例
2017/12/07 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
生产部岗位职责范文
2014/02/07 职场文书
消防安全责任书
2014/04/14 职场文书
免职证明样本
2014/10/23 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
办公室文员岗位职责
2015/02/04 职场文书
贷款工作证明模板
2015/06/12 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android