Javascript 如何在jQuery中编辑css规则？_Javascript_Jquery_Html_Css

Javascript 如何在jQuery中编辑css规则？

javascript jquery html css

Javascript 如何在jQuery中编辑css规则？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这样做的目的是动态地将行添加到表中，并且以后手动应用规则并不是那么好（而且速度也慢）具体的例子是，我正在创建一个树表来表示一个文件夹目录。每个文件夹都是一个div。在每个div中，有一个ul，每个列的信息都有一个li。这些li具有与列名等效的类名。这提供了列宽。但是，我想使列的大小可以调整。我可以做$（'.className'）.css（'width'，newWidth），但这不适用于新插入的项目。因此，我想修改css规则。如何做到这一点？jQuery实际上不适合以这种方式编辑CSS 不过，使

这样做的目的是动态地将行添加到表中，并且以后手动应用规则并不是那么好（而且速度也慢）

具体的例子是，我正在创建一个树表来表示一个文件夹目录。每个文件夹都是一个

div

。在每个

div

中，有一个

ul

，每个列的信息都有一个

li

。这些

li

具有与列名等效的类名。这提供了列宽。但是，我想使列的大小可以调整。我可以做

$（'.className'）.css（'width'，newWidth）

，但这不适用于新插入的项目。因此，我想修改css规则。如何做到这一点？

jQuery实际上不适合以这种方式编辑CSS

不过，使用

.css（）

可以实现您想要的功能。不要更改单个元素的宽度，将它们保持为100%，并调整其父容器的大小，以便任何新插入的项目的宽度为100%，并采用父容器的宽度

编辑

如何动态插入/更新行？如果在现有行上使用，则应包括由

.css（）

添加的内联css，这意味着您不必调整大小。

我使用此库直接修改css规则，它实现了这一点（尽管这是一个纯javascript解决方案）：

库如何直接修改规则：

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

不幸的是，由于JavaScript本身的限制，jQuery无法直接操作CSS规则；它的功能扩展到仅包含页面元素的DOM，因此CSS规则本身也不存在（甚至连本机分配给元素的CSS属性也很难跨浏览器获得）。

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

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

如果经常更新宽度，则会有点混乱，但是CSS解析器将使用列表中的最后一条规则，因此.append（）用于更新以前的宽度指定。您可以使用.html（）而不是.append（）来覆盖样式表的内容。

您说

“行被动态添加到一个表中”

，然后“

每个文件夹都是一个div。在每个div中，都有一个带有li的ul

”，您有没有理由不将表格内容标记为

table

dom呈现表的速度非常慢，即使使用字符串操作也是如此。@roselan引证需要。我怀疑他们对OP所描述的内容的反应会令人望而却步，甚至是明显的缓慢。你是如何添加新插入的项目的？如果在现有行上使用，则应包括包含新宽度的内联CSS。这些行需要可拖动且可按文件夹隐藏。隐藏一个div非常快，而从一个表中隐藏行却不是。这是行不通的，正如我前面解释的，文件（行）包含在它们的文件夹中，这意味着100%的宽度就是整行。哦，我明白了。在这两个列中，是否需要调整其他列的大小？它们是否可以有一个静态宽度，并让信息的

li

作为展开的元素。如果是表格，为什么不使用表格？是的，我希望列的大小可以调整。我对表数据使用divs的原因是该表是一个树表，这意味着单击“打开”链接将打开一个文件夹并显示子行。为了有效地做到这一点，我使用了div。想要的功能数量意味着滚动自己的可能不是最好的方法，看看插件：例如（因为jQuery UI还没有treeview），jsTree很不错，但我需要一个表格式来显示文件属性是的，这就是我想做的，我只是希望有更好的方法实际上，您可以直接使用document.styleSheets和styleSheet.cssRules操作CSS规则-这些也是DOM的一部分（请参见我的答案）。我的firebug称getCSSRule操作不安全。你知道为什么吗？你是从另一个域修改css文件吗？如果是这样，那就可以解释为什么…不，所有的本地和相同的域

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