- 浏览: 1431130 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
问题:
由于 css 属性单位可以设置为 em ,以及 % 来达到流体布局以及弹性布局的效果,但是当 javascript 操作这些元素进行运算时,一般要转换为绝对数值进行运算,比如 offsetWidth ,offsetHeight ,但是不是所有的css属性(padding,margin)都对应上述可以得到直接数值的属性,w3c 规范说明可以使用
document.defaultView.getComputedStyle(element,null).getPropertyValue(property);
来获得相应 css property 的像素绝对值(也不是完美的,存在缩写属性读取问题 ),而 ie 则完全没有办法 ,
element.currentStyle.property
只能获得用户指定的原始css 属性,比如 4em 或 20%,没有设置则为 auto
解决:
Dean Edwards 提出了针对 ie 的处理方式,利用了生僻的ie特有元素属性 runtimeStyle (运行时样式,比style优先级更高, 设置runtimestyle后再修改style对应属性,UI不会有对应变化) ,以及 style 某些属性相应的 pixel 属性,获取到了任意css 属性有效单元的运行时绝对像素数值。
From Secrets of the javacript ninja :
.runtimeStyle is analogous to .style with one exception: Any style properties set using
.runtimeStyle.prop will override .style.prop (which still leaving the value contained in
.style.prop intact).
.pixelLeft (and Top, Bottom, Right, Height, and Width) are properties for directly accessing the pixel
value of the respective CSS properties. (Note: These could be used as alternatives to even using Dean
Edwards' technique in the first place for these properties - Dean's technique is more useful for things like
font-size, line-height, etc.).
The technique works by setting the current computed left to the runtime left ('left' is chosen arbitrarily
- it could also work with top, right, etc.) - this will keep the positioning of the element intact while we
compute the pixel value. The pixel value is computed by setting the .style.left and then reading the
resulting pixel value out using .style.pixelLeft.
Dean's technique isn't perfect - especially when attempting to handle percentages on elements that are
a child of the body element (they end up expanding to consume a large portion of the document - 10%
becomes 200px, for example) but it ends up working well enough to handle most of the common use cases.
核心代码
var PIXEL = /^\d+(px)?$/i; function getPixelValue(element, value) { if (PIXEL.test(value)) return parseInt(value); var style = element.style.left; var runtimeStyle = element.runtimeStyle.left; element.runtimeStyle.left = element.currentStyle.left; element.style.left = value || 0; value = element.style.pixelLeft; element.style.left = style; element.runtimeStyle.left = runtimeStyle; return value; };
YUI3 解决:
dom-style-debug.js
相当于模拟实现了标准浏览器原生的GET_COMPUTED_STYLE:
if (!Y.config.win[GET_COMPUTED_STYLE]) { Y.DOM[GET_COMPUTED_STYLE] = ComputedStyle.get; }
对于 width,height的数值获取采用 offsetWidth 减去 padding和边框的数值 ,而边框,padding,margin以及其他属性的数值则用上述的pixel方法获取。
IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset; IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] = IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] = ComputedStyle.getBorderWidth; IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom = IEComputed.marginLeft = ComputedStyle.getMargin;
注意: width,height 不能统一用 getPixelValue 来获取数值,width,height似乎有问题(为什么啊??pixelleft不能代表?),所以 yui3 区别判断用了offsetXX ,jquery也存在这个问题:(kissy 和 yui3 保持一致 )
<style> #t { width:80%; position:relative; left:80%; } </style> <div id="t"> </div> <script src="http://kissy.googlecode.com/svn/trunk/build/packages/ks-core.js"></script> <script src="http://kissy.googlecode.com/svn/trunk/build/node/node-pkg-min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </script> <script src="http://www.sencha.com/products/core/manual/js/ext-base.js"></script> <script src="http://www.sencha.com/products/core/manual/js/extjs.js"></script> <script> YUI().use("node",function(Y){ var s=KISSY; alert(s.one("#t").css("width")); alert(s.one("#t")[0].offsetWidth); alert(Y.one("#t").getStyle("width")); alert(Ext.get("t").getStyle("width")); alert("jquery : "+$("#t").css("width")); }); </script>
ps:IE color问题
同样的,如果color设置为red,black等字符数值,则标准兼容浏览器可以使用getComputedStyle得到16进制数值,而ie则会取得字符串值,dean同样给出了ie专用的方法,利用IE专有的queryCommandValue ?
function toHex(color) { var body = createPopup().document.body, range = body.createTextRange(); body.style.color = color; var value = range.queryCommandValue("ForeColor"); value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16); value = value.toString(16); return "#000000".slice(0, 7 - value.length) + value; };
PS: IE 绝对定位 left(top) 问题
当元素为绝对定位且不设置left(top)时,ie 使用 currentStyle 取得为 auto,而我们如果使用上述的 pixelLeft可以得到为0,但是实际上由于left是和其相对定位的祖先有关,即使不设置也不为0的,在标准浏览器中可用 getComputedStyle 计算取得,或许有些库使用 offsetLeft 来代替 left ,实际上这是不对的,详见:Ext.Element.setXY 使用注意 bug in IE ? 。KISSY 中对这个问题特殊处理,使用 offsetLeft - margin-left :
// getComputedStyle for IE var RE_SPECIAL = /^auto$/i, RE_WH = /^width|height$/i, RE_LEFT = /^left$/i, POSITION = "position"; if (! (doc.defaultView || {}).getComputedStyle && docElem[CURRENT_STYLE]) { DOM._getComputedStyle = function (elem, name) { var style = elem.style, ret = elem[CURRENT_STYLE][name]; if (RE_SPECIAL.test(ret) && RE_LEFT.test(name)) { var position = DOM.css(elem, POSITION); //absolute: auto == offsetLeft - margin-left if (position == "absolute") ret = elem.offsetLeft - parseInt(DOM.css(elem, "margin-left")); //relative: auto ==0 else ret = 0; }.... } }
评论
for ie7,要使元素大小发生变化,才能获取,如下例,要获取 父级 td 元素 的 高度,怎么获取绝对像素值?
//导入iframe时获取高度并适应 function iFrameHeight(ifm) { if(window.navigator.isFF || window.navigator.isIE8) ifm.height = document.getElementById('tdtd').offsetHeight; if(window.navigator.isIE7){ // ie6, ie7 不能通过 offsetHeight 来直接获取绝对的高度,getComputed() 也是返回 ifm.style.height ="auto",于是…… document.getElementById('tdtd').height = "100%"; ifm.height = document.getElementById('tdtd').offsetHeight - 30; document.getElementById('tdtd').height = ""; } }
只是一个思路。
您认为设置runtimeStyle的目的在于“设置runtimestyle后再修改style对应属性,UI不会有对应变化”
结合您给出的DE的原始代码来看,这个解释可以说得通
但Jquery1.5之后,代码里这里有一点细节变动
导致这个解释有一个无法自圆其说的地方
详见我的一篇blog: http://hunter3721.iteye.com/blog/1697054
我还注意到kissy的源码里,此处的代码是和最新的JQ保持一致的
所以希望yiminghe能帮忙解释一下我的疑惑~
有意思,我都忘了,有空看看答复你
您认为设置runtimeStyle的目的在于“设置runtimestyle后再修改style对应属性,UI不会有对应变化”
结合您给出的DE的原始代码来看,这个解释可以说得通
但Jquery1.5之后,代码里这里有一点细节变动
导致这个解释有一个无法自圆其说的地方
详见我的一篇blog: http://hunter3721.iteye.com/blog/1697054
我还注意到kissy的源码里,此处的代码是和最新的JQ保持一致的
所以希望yiminghe能帮忙解释一下我的疑惑~
发表评论
-
continuation, cps
2013-09-12 16:49 2707起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3336一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14005cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5273目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4916最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6322css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7267promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2761closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2839首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6367兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3156背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2881如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2778简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2782场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2193分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6923作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2668html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2405这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2225深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3184场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
ie兼容Css3属性
css属性列表_和_属性值含义,新手可以作为入门参考
批量输出 CSS background-position 属性的定位像素值
css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全
iecss3.htc css3圆角支持文件
css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全
资源名称:CSS 属性兼容性对照表内容简介: CSS属性兼容性对照表 PDF,主要是列出一些CSS2.0/CSS2.1在各个版本的IE、火狐等主流浏览器下的兼容支持问题,此表有助于以后书写出全兼容的WEB标准化网页打下基础,前端...
CSS CSS属性 速查表 CSS属性速查表
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
最全最细的css属性思维导图,css所有的属性几乎都列在这里了。 注意这只是一个思维导图,没有对每个属性的具体描述,相当于只是css属性的一个罗列汇总。介意者慎载。
通过引入htc文件,使ie可以支持css3的属性
IE兼容CSS3,一句JS可以解决CSS3兼容问题
常用的CSS属性大全 常用的CSS属性大全 常用的CSS属性大全 常用的CSS属性大全
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
CSS属性解释,常见的CSS属性,还包括DIV+CSS常属性
ie-css3(让ie678支持css3).rar
本文档为pdf格式文件,里面是一张思维导图,总结了CSS常用属性和值以及其他的特点。有助于学习者很快的额理清楚这部分的知识架构,文档清淅明了简单易懂。花了好大功夫写的,很详细的,欢迎下载哈。
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
让IE6/IE7/IE8支持CSS3属性的脚本ie-css3.htc,之前刚接触CSDN的时候,曾经分享过一个50积分的,非常抱歉,这个免费的
css属性查询手册 css 2.0中文版(chm)