代码之家 › 专栏 › 技术社区 › jantimon

有没有getter jquerys的css翻译?

cross-browser css jquery javascript

jantimon · 技术社区 · 15 年前

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 方法。

如果有关于getter方法的翻译的话,我也很好奇。

5 回复 | 直到 15 年前

João Portela 15 年前

出于某种原因,它在我的Google Chrome(3.0.195.27-Windows)上不起作用,但在Firefox上起作用。希望它有帮助。

编辑: 进一步的测试显示了有趣的结果。

a)Chrome似乎将0000FF转换为RGB(0,0255),但这并不适用于“蓝色”。

b)根据您要求的属性,Firefox将显示非常不同的结果。特定的背景颜色属性,它将颜色转换为格式RGB(0,0255)

只看:

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 你自己动手吧。

Joel Martinez 15 年前

这与jquery没有任何关系…浏览器的CSS支持完全独立于jquery支持跨浏览器API的能力(您是对的,太神奇了;-)。我不想这么说,但唯一能找到的方法是在不同的浏览器中尝试特定的代码片段

Seb 15 年前

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

Antonello Pasella 15 年前

在这里设置css属性是一个浏览器问题。

jquery“normalize”仅在读取属性的位置

kgiannakakis 15 年前

jquery是开放源码的,虽然代码不容易阅读,但只要稍加努力,通过使用firebug浏览代码,就可以找到所需的信息。我来帮您处理jquery-1.3.2。

要设置样式,请查看第1037行。如您所见,jquery对IE不透明度只有特殊的处理。它还使用正则表达式将样式名转换为camel大小写符号。所以, background-color 会被翻译成 backgroundColor . 另请参见Prop功能(第698行)。将数字设置为CSS属性且尚未定义单位时,将使用“px”。有关从该模式中排除的属性,请参见排除方法(第612行)。

要读取属性,请参见第781行中的curcss函数。同样,不透明度是特殊处理的。此外,还有一些处理级联样式的相当复杂的代码。看到这个 discussion ,它实际上是从jquery的代码中引用的。再说一次,IE需要特别处理。

在阅读 背景色 和 背景色 . 要了解发生了什么,可以运行以下代码:

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

在阅读时,jquery不会将所有样式转换为camel case。如果 style[name] 它直接返回。否则它会使用 getComputedStyle . 级联样式的情况更复杂。