var Element = {};
Element.getStyles1 = function() {
var view = document.defaultView;
var propCache = {};
var camelRe = /(-[a-z])/gi;
var camelFn = function(m, a) {
return a.charAt(1).toUpperCase();
};
return view && view.getComputedStyle ? function(el, prop) {
var v, cs, camel;
if (prop == 'float') {
prop = "cssFloat";
}
if (v = el.style[prop]) {
return v;
}
if (cs = view.getComputedStyle(el, "")) {
//if (!(camel = propCache[prop])) {
//camel = propCache[prop] = prop.replace(camelRe, camelFn);
// }
camel = prop.replace(camelRe, camelFn);
return cs[camel];
}
return null;
} : function(el, prop) {
var v, cs, camel;
if (prop == 'opacity') {
if (typeof el.style.filter == 'string') {
var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
if (m) {
var fv = parseFloat(m[1]);
if (!isNaN(fv)) {
return fv ? fv / 100 : 0;
}
}
}
return 1;
} else if (prop == 'float') {
prop = "styleFloat";
}
if (!(camel = propCache[prop])) {
camel = propCache[prop] = prop.replace(camelRe, camelFn);
}
if (v = el.style[camel]) {
return v;
}
if (cs = el.currentStyle) {
return cs[camel];
}
return null;
};
}();
Element.getStyles2 = function(element, style) {
var camelRe = /(-[a-z])/gi;
var propCache = {};
var camelFn = function(m, a) {
return a.charAt(1).toUpperCase();
};
//if (!(camel = propCache[style])) {
camel = propCache[style] = style.replace(camelRe, camelFn);
// }
style = style == 'float' ? 'cssFloat' : camel;//style.replace(camelRe, camelFn);;
var value = element.style[style];
if (!value || value == 'auto') {
if(document.defaultView)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css[style] : null;
}
if (style == 'opacity')
return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
};
var s = ['width', 'heigth', 'opacity', 'float', 'margin', 'border',
'background', 'top', 'button','padding-left','padding-right','margin-bottom','border-bottom-width','border-right-width'];
var now = new Date().getTime();
for (var i = 0;i < 10000; i++) {
var m =parseInt(Math.random()*(s.length-1))+1;
var el=document.getElementById('test1');
Element.getStyles1(el, s[m]);
}
var now1 = new Date().getTime();
alert(now1 - now);
var now = new Date().getTime();
for (var i = 0;i < 10000; i++) {
var m =parseInt(Math.random()*(s.length-1))+1;
Element.getStyles2 (document.getElementById('test1'), s[m]);
}
var now1 = new Date().getTime();
alert(now1 - now);
在分析Ext,觉得ext,yui(类似style1的实现)要不要这样做,于是做了一个性能的测试
在IE中 style1:420-440之间,style2:'453-470之间
在FF中,style1:953-970之间,style2:1266-1287之间
加上came缓存的性能提升在0-20之间。
先不用去说prototype,mootools的类似的getstyle2的实现上有点问题。而且性能还是差很多,要慢五分之一。
分享到:
相关推荐
} 定义一个id=”flower”的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 ”flower”>…</div> getStyle函数: 这里用到了三个原型扩展 String.prototype.capitalize 这个方法是让字符...
要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些... 代码如下:var getStyle = function( elem, type ){ return ‘getComputedStyle’ in window ? getComputedStyle(elem, null)[type] :
this.getStyle().backgroundColor = "red";//This would change all row instances onCreate: if (this.getRowData().getExpressionValue(3) > 100) this.getStyle().backgroundColor="red";//This will only ...
比较流行的imgui库,作者提供的例子比较乱,因此对imgui1.78库的重新整理封装,便于扩展开发。可以快速引用至自己的工程,具体使用可查看我的相关博文。
注: 获取Dom元素的Style数组中的指定Style元素 代码如下: function elementGetStyle(element, style) { var value = null; if (element.style) { value = element.style[style]; } if (!value) { if (document....
在后台cs文件中有个函数: 代码如下... 您可能感兴趣的文章:收集学习asp.net比较完整的面向对象开发流程ASP.NET编程中经常用到的27个函数集asp.net简化接收参数值的函数介绍几个ASP.NET中容易忽略但却很重要的方法函数A
getStyle ( el , 'background-color' ) // => '#ffffff' , left = style . getNumericStyle ( el , 'left' ) // => [75, 'px'] , rotation = style . getStyle ( el , 'rotate' ) ; // => '45deg' style . ...
从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的’bug’及其对策解决方案就是封装getStyle(obj, ...
Janvas ...一款轻量、简单的基于 HTML5 Canvas 2d 绘图上下文的 JavaScript 绘图库,...易用,图形变形 shape.getMatrix(),样式 shape.getStyle(); 强大,原生封装绘制、SVG Path 支持、坐标点等等计算的支持; 兼容,只
function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行...
内含JS轮播图详细代码和注解,对应封装函数有获取元素样式getStyle,元素移动move,代码中有重复部分,再次对轮播图代码进行了封装
上下位机实验指导long CiPlotAnnotationX::GetStyle() { long result; InvokeHelper(0x1, DISPATCH_PROPERTYGET, VT_I4, (void*)&result, NULL); return result; }
IE6与其他浏览器兼容,取非行间样式2: function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }
weather_.getStyle('qq'); 大陆仔天气预报支持两套风格:QQ风格和未名风格。 QQ风格将和QQ天气预报一样的皮肤和显示方式, 未名风格则是官方自己开发的一套风格,因为图片的来源未知,因此起名为 未名风格。 接...
一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性) 那么来说说在js和jquery中...
id=”float”> 我是个腼腆羞涩的浮动层… </div> JS代码: 代码如下: var $smartFloat = function(elements) { var position = function(element) { var top = element.getPosition().y, pos = element.getStyle(...
addEvent removeEvent triggerEvent 选择selectById selectByClass selectByTag selectByQuery selectParentById selectParentByClass ...的addClass removeClass hasClass toggleClass getStyle getQuer
1.事件冒泡: //取消冒泡 if(e.stopPropagation){ ...function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentStyle[stylename]; }else{ //其他浏览器