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

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

这就是浏览器处理速记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 / contentEditable场景中(这是唯一真正合理使用直接样式而不是CSS类),只是抢夺元素的innerHTML表示是一大堆潜在的风险.你会在IE的旧版本中看到其他的表现形式,其DOM的“标记”表示完全是疯了.看到像这样的东西并不罕见：

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

成为：

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

就像DOM和标记不是同一个东西一样,重要的是要意识到属性和属性不是同一个东西.最终,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’,…),您可能会覆盖所有元素的内联样式.