为什么在 jquery 中设置 TD 样式会使标记变得疯狂？

Question

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

重要的是，我的标记要保持简单，以便我可以使用其他一些功能。

假设我的 tds 样式如下：

$('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/contentEditable 场景中（这是唯一真正合理使用直接样式而不是 CSS 类），仅抢夺元素的 innerHTML 表示就是一大堆潜在风险。您会在旧版本的 IE 中看到其他表现形式，其 DOM 的“标记”表示完全是疯狂的。看到类似的东西并不少见：

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

变成：

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

正如 DOM 和标记不是一回事，重要的是要意识到 attribute 和 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', ...)，您可能会覆盖所有元素的内联样式。