Question

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方法有任何翻译，我很好奇。

Answer 1

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

Answer 2

由于某种原因，它不能在我的谷歌浏览器（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自己。

Answer 3

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

Answer 4

设置CSS属性的位置是浏览器问题。

jQuery“normalize”仅在阅读属性的地方

Answer 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。对于级联风格，事情变得更加复杂。

有没有getter jQuerys CSS翻译？

5 个答案: