为什么在jquery中使用样式TD会使标记疯狂？

Question

我正在尝试为表中的所有表格单元格添加一个简单的边框.

重要的是我的标记对于我工作的其他一些功能来说仍然很简单.

比方说我喜欢这样的风格:

$('td').css('border', '1px solid #000');

最终结果如下:

<td style=?"border-top-width:? 1px;? border-right-width:? 1px;? border-bottom-width:? 1px;? border-left-width:? 1px;? border-top-style:? solid;? border-right-style:? solid;? border-bottom-style:? solid;? border-left-style:? solid;? border-top-color:? rgb(0, 0, 0)?;? border-right-color:? rgb(0, 0, 0)?;? border-bottom-color:? rgb(0, 0, 0)?;? border-left-color:? rgb(0, 0, 0)?;? ">?…?/td>

类也不适合我正在尝试做的事情.为什么我的细胞以这种荒谬的方式被格式化？

Answer 1

这就是浏览器处理速记CSS属性的方式; 某些浏览器可能与内部表示不同地实现人类可读的表示,但实际上,

border: 1px solid #000

是简写

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;

有许多可能的表示#000.

我在Chrome和Safari(两个WebKit浏览器)中都进行了测试,并且直接在DOM(element.style.border = '1px solid #000')中设置该属性就具有了这个结果.这是WebKit的行为,而不是jQuery.

此外,这是一个很好的例子,强调DOM与标记不同,应该区别对待.即使在designMode/ contentEditablescenario中(这是唯一真正合理使用直接样式而不是CSS类),只是抢夺innerHTML元素的表示是一大堆潜在的风险.你会在IE的旧版本中看到其他的表现形式,其DOM的"标记"表示完全是疯了.看到像这样的东西并不罕见:

<div class="foo">...</div>

成为:

<DIV CLASS="foo" _JQUERY12903579="qwertyuiop" HASLAYOUT=TRUE etc etc etc>...</DIV>

就像DOM和标记不是同一个东西一样,重要的是要意识到a attribute和a property不是同一个东西.最终,该jQuery.css方法是通过为属性赋值来实现的element.style(例如collection.css({ border: '1px solid #000' }),大致相当于collection.each(function() { this.style.border = '1px solid #000' }); collection.attr('style', 'border: 1px solid #000')等同于collection.each(function() { this.setAttribute('style', 'border: 1px solid #000'); }).通过设置属性而不是属性,您正在做的事情就像追溯编辑HTML标记一样.这可能导致如果您还设置了冲突的属性,则会出现不可预测的结果.

另请注意,通过使用attr('style', ...),您可能会覆盖所有元素的内联样式.