Javascript/Jquery:.css像素值

Question

我刚才意识到两者之间存在差异

<foo>.css('marginTop')

(我认为这是标准的jquery-notation)和

<foo>.css('margin-top')

(我认为这是非标准的).

如果有margin-top:3em; (例如),第一个符号给我3em,第二个符号给我48px(像素为3em).我喜欢这种行为,但我在API中找不到任何关于它的东西(或者我是盲人？)

为什么会这样,我在哪里可以找到有关它的信息？

PS:准确地说:当然还有其他属性,但是边缘工作以及......

谢谢!

Answer 1

该文档称"jQuery可以同样解释多字属性的CSS和DOM格式",但实际上它是通过粗略和准备好的黑客来做到这一点,并不总是可预测的行为.

特别是,如果您提供DOM样式camelCaseName,它将首先尝试访问内联样式声明style.camelCaseName.如果失败(通常因为风格没有内嵌设置),它退到试图getComputedStyle与camelCaseName转换为hyphen-separated-name(*).计算出的样式与声明的样式不同:浏览器可以解析计算样式中的各种相对声明,例如将长度转换为像素单位.

但是,反过来不成立!如果您提供CSS样式hyphen-separated-name,它会直接跳转到计算样式(*)代码,而不尝试转换为camelCaseName并查看内联样式.

我不认为我会依赖这种行为......它闻起来有点儿麻烦.如果您可以将内联样式声明保留在要测量的元素之外,则无论您使用哪种名称类型,都应该能够确保始终获得计算出的样式.但话说回来,jQuery并没有把它作为一个记录在案的承诺.这就是试图隐藏一个看似简单的"Do Do I Mean"界面背后的复杂模型的本质.

(*):除了在没有getComputedStyle功能的IE中,所以它回归到一个奇怪而脆弱的混合currentStyle,runtimeStyle并且文档改变以试图获得计算出的样式.