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 / 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'); }) 1}}。通过设置属性而不是属性，您正在做的事情就像追溯编辑HTML标记一样。如果您还设置了冲突的属性，这可能会导致不可预测的结果。

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

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

1 个答案: