我正在尝试为表中的所有表格单元格添加一个简单的边框.
比方说我喜欢这样的风格：
$('td').css('border','1px solid #000');
最终结果如下：
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);
border-right-color: rgb(0,0);
border-bottom-color: rgb(0,0);
border-left-color: rgb(0,0);
">…/td>
类也不适合我正在尝试做的事情.为什么我的细胞以这种荒谬的方式被格式化？
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的“标记”表示完全是疯了.看到像这样的东西并不罕见：
成为：
就像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’,…),您可能会覆盖所有元素的内联样式.
原文链接：https://www.f2er.com/css/427210.html
