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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
基于initPHP的框架介绍
2013/04/18 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
决策树的python实现方法
2014/11/18 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python开发游戏的前期准备
2019/05/05 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
党建示范点实施方案
2014/03/12 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
大学生工作求职信
2014/06/23 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
优秀教师先进材料
2014/12/16 职场文书
学校捐书活动总结
2015/05/08 职场文书
学生病假条怎么写
2015/08/17 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书