jquery - 为什么 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', ...)，您可能会覆盖 所有 元素的内联样式。