Question

目的是将行动态地添加到表中，以后稍后手动应用规则就不那么好了（而且速度较慢）。

具体的例子是我正在创建一个树表来表示文件夹目录。每个文件夹都是div。在每个div中，每个列的信息都有一个ul li。这些li具有与列名等效的类名。这提供了列宽。我想让列可调整大小。我可以做$('.className').css('width', newWidth)但是这不适用于新插入的项目。因此，我想修改css规则。我该怎么做？

Answer 1

jQuery并不是真的以这种方式编辑CSS。

虽然可以使用.css()实现您想要的效果。不要更改单个元素的宽度，将它们保持100％并调整其父容器的大小，因此任何新插入的项目的宽度都是100％，并采用父容器的宽度。

修改你是如何动态插入/更新行的？如果您在现有行上使用.clone()，则应包含.css()添加的内联css，这意味着您无需调整大小。

Answer 2

我已经使用这个库直接修改css规则并且它可以解决问题（虽然它是纯粹的javascript解决方案）：

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

库如何直接修改规则：

document.styleSheets[i].cssRules[i].style.width=newWidth;

Answer 3

您可以使用带有ID的空样式标记设置html文档。

<html>
<head>
    <style id="styleTarget"></style>
</head>

然后使用jQuery将规则“附加”到其中。

var columName = "whatever-your-column-name-is"
$('#styleTarget').append('.'+columName+' { width: '+newWidth+' }' );

如果你要更新宽度会有点麻烦，但CSS解析器将使用列表中的最后一个规则，因此.append（）可用于更新以前的宽度分配。您可以使用.html（）而不是.append（）来覆盖样式表的内容。

Answer 4

不幸的是，由于JavaScript原生的限制，jQuery不能直接操纵CSS规则;它的能力只扩展到仅包含页面元素的DOM，因此不是CSS规则本身（甚至本地分配给元素的CSS属性也很难获得跨浏览器）。

如何在jQuery中编辑css规则？

4 个答案: