有没有 getter jQuerys CSS 翻译？答案

【问题标题】：Are there any getter jQuerys CSS translation?有没有 getter jQuerys CSS 翻译？
【发布时间】：2009-10-26 22:07:09
【问题描述】：

jQuery 的跨浏览器支持令人惊叹。但是我想知道以下脚本是否可以在任何浏览器中运行。

$("#block1").css('background','blue');
$("#block2").css('backgroundColor', '#0000ff');
$("#block3").css('background-color', 'rgb(0, 0, 255)');

if ( $("#block1").css('background-color') == $("#block2").css('background-color') &&  
     $("#block1").css('background-color') == $("#block3").css('background-color') )
{
   alert ( 'same color : ' + $("#block1").css('background') );
}

Demo

正如您所见，这 3 种不同的 setter 方法所做的事情完全相同。将背景颜色更改为蓝色。

.css方法的setter方法好像有翻译。

我很好奇 getter 方法是否也有任何翻译。

【问题讨论】：

如果你能自己检查就更好了。
是的，伙计。为什么不自己检查呢

标签： javascript jquery css cross-browser

【解决方案1】：

这实际上与 jquery 没有任何关系......浏览器的 css 支持完全独立于 jQuery 支持跨浏览器 API 的能力（你是对的，太棒了 ;-)）。我不想这么说，但找出答案的唯一方法是在您定位的不同浏览器中尝试特定的代码 sn-p

【讨论】：

它可能与 jQuery 有关 - 我认为 OP 所问的是“Jquery 是否根据主机浏览器对 CSS 属性/值进行任何翻译？”
跟随 belugabob，是的，jQuery 确实会先检查浏览器。这在设置不透明度时很明显。这将导致 FF、IE 等不同的 CSS 样式。
哇，老实说，我不知道 jquery 为 css 做了这种透明的翻译......太棒了:-)

【解决方案2】：

由于某种原因，它无法在我的 google-chrome(3.0.195.27 - windows) 上运行，但在 Firefox 上运行。希望有帮助。

编辑： 进一步的测试揭示了有趣的结果。

a) chrome 似乎将 #0000ff 转换为 rgb(0,0,255) 但同样不适用于“蓝色”

b) Firefox 将根据您要求的属性显示非常不同的结果。特别是对于 background-color 属性，它将颜色转换为格式 rgb(0,0,255)

只是看：

chrome, 'background' property http://img237.imageshack.us/img237/7223/chrome1.png chrome, 'background-color' property http://img43.imageshack.us/img43/7383/chrome2.png chrome, 'backgroundColor' property http://img98.imageshack.us/img98/1127/chrome3.png firefox, 'background' property http://img40.imageshack.us/img40/2374/firefox1b.png firefox, 'background-color' property http://img40.imageshack.us/img40/3706/firefox2h.png firefox, 'backgroundColor' property http://img94.imageshack.us/img94/9139/firefox3.png

请自行test。

【讨论】：

谢谢！我猜翻译只由浏览器完成，而不是由 jQuery 完成。
从其他答案我认为结论是 jQuery 只做一些翻译（比如已经提到的不透明度）。真正知道是否为特定属性完成翻译的唯一方法是测试或检查源。

【解决方案3】：

您需要设置backgroundColor 而不是background-color，就像您使用标准JS 一样——即element.style.backgroundColor = '#FFFFFF';。

【讨论】：

jQuery 处理这种差异
不知道！事实证明，旧版本并没有很好地管理这一点，所以可能取决于您的版本，您不妨这样做:)

【解决方案4】：

在哪里设置 CSS 属性是浏览器问题。

jQuery“规范化”只在读取属性的地方

【讨论】：

【解决方案5】：

jQuery 是开源的，虽然代码不是很容易阅读，但只要稍加努力并使用 Firebug 浏览代码，您就可以找到您要查找的信息。让我帮你搞定 jquery-1.3.2。

要设置样式，请查看第 1037 行。如您所见，jQuery 仅对 IE 不透明度进行了特殊处理。它还使用正则表达式将样式名称转换为驼峰式表示法。所以，background-color 实际上会被翻译成backgroundColor。另见 prop 函数（第 698 行）。当为 css 属性设置数字且未定义单位时，将使用 'px'。有关从该模式中排除的属性，请参见 exclude 方法（第 612 行）。

要读取属性，请参见第 781 行中的 curCSS 函数。不透明度再次经过特殊处理。此外，还有一些相当复杂的代码用于处理级联样式。看到这个discussion，实际上是从jQuery的代码中引用的。再次需要对 IE 进行特殊处理。

在阅读backgroundColor 和background-color 的样式时，也存在细微差别。要了解发生了什么，您可以运行以下代码：

element = document.getElementById('block1');
alert(element.style['backgroundColor']);
alert(element.style['background-color']);
alert(document.defaultView.getComputedStyle( element, null ).getPropertyValue( 'background-color' ));

阅读时，jQuery 不会将所有样式转换为驼峰式。如果定义了style[name]，则直接返回。否则它使用getComputedStyle。级联样式的情况更复杂。

【讨论】：

显然 background-color 没有在所有浏览器上翻译。（见我的帖子）
jQuery 只翻译属性的名称（将其转换为 Camel 大小写）而不是值。然后取决于浏览器如何处理写入的值以及读取时返回的内容。
如果他翻译从 background-color 和 backgroundColor 获得的属性名称应该返回相同的值，对吧？而那并没有发生……
查看我编辑的答案。没有神奇的翻译。只需浏览代码即可了解发生了什么。