为什么 jquery 中的 TD 样式会让标记变得疯狂？
我正在尝试向表格中的所有表格单元格添加一个简单的边框。
对于我可以使用的其他一些功能来说，我的标记保持简单非常重要。
假设我像这样设置 tds 样式：
$('td').css('border', '1px solid #000');
这最终是我的结果：
… /td>
类也不适合我想做的事情。为什么我的单元格会以这种荒谬的方式格式化？
I'm trying to add a simple border to all the table cells in a table.
It's important that my markup remains simple for some other functionality I have in place to work.
Let's say I style tds like this:
$('td').css('border', '1px solid #000');
this ends up as my result:
<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>
Classes also wouldn't be appropriate for what I'm trying to do. Why are my cells being formatted in this ridiculous way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这就是浏览器处理速记 CSS 属性的方式；一些浏览器可能会以不同于内部表示的方式实现人类可读的表示，但实际上，
的简写
它是
#000的许多可能表示。我在 Chrome 和 Safari（均为 WebKit 浏览器）中进行了测试，并直接在 DOM 中设置该属性 (
element.style.border = '1px Solid #000') 得到了完全相同的结果。这是 WebKit 的行为，不是 jQuery。此外，这是一个很好的例子，它强调了 DOM 与标记不同并且应该区别对待这一事实。即使在innerHTML 表示存在一系列潜在风险。您会在旧版本的 IE 中看到这种情况的其他表现，其 DOM 的“标记”表示完全是疯狂的。看到类似这样的内容并不少见：
designMode/contentEditable场景中（这是唯一真正合理使用直接样式而不是 CSS 类的情况），只需抢夺成为：
正如 DOM 和标记不是同一件事一样，重要的是要认识到
attribute和property并不相同事物。最终，jQuery.css方法是通过为element.style的属性赋值来实现的（例如collection.css({ border: '1pxsolid #000' })大致相当于collection.each(function() { this.style.border = '1px Solid #000' })而collection.attr('style ', 'border: 1pxsolid #000')相当于collection.each(function() { this.setAttribute('style', 'border: 1pxsolid #000'); })>.通过 风格'， ...)，您可能会覆盖所有元素的内联样式。
This is how browsers handle shorthand CSS properties; some browsers may implement the human-readable representation differently from the internal representation, but in reality,
is shorthand for
with a number of possible representations of
#000.I tested in both Chrome and Safari (both WebKit browsers), and setting that property directly in the DOM (
element.style.border = '1px solid #000') had exactly that result. This is the behavior of WebKit, not jQuery.Furthermore, this is a great example to underscore the fact that the DOM is different from markup, and ought to be treated differently. Even in a
designMode/contentEditablescenario (which is the only really reasonable use of direct styling instead of CSS classes), just snatching theinnerHTMLrepresentation of an element is a whole host of potential risks. You'll see other manifestations of this in older versions of IE, whose "markup" representations of the DOM are completely insane. It's not uncommon to see stuff like:become:
And just as DOM and markup are not the same thing, it's important to realize that an
attributeand apropertyare not the same thing. Ultimately, thejQuery.cssmethod is implemented by assigning values to properties ofelement.style(egcollection.css({ border: '1px solid #000' })is roughly equivalent tocollection.each(function() { this.style.border = '1px solid #000' }); whilecollection.attr('style', 'border: 1px solid #000')is equivalent tocollection.each(function() { this.setAttribute('style', 'border: 1px solid #000'); }). By setting the attribute rather than properties, what you're doing is effectively like retroactively editing the HTML markup. This can lead to unpredictable results if you also have properties set that conflict.Also note that by using
attr('style', ...), you are probably overriding all of the elements' inline styles.