如何在jQuery中编辑CSS规则？
[英]How can I edit a css rule in jQuery?
问题描述
The purpose is that rows are dynamically added to a table and it is not as nice (and slower) to apply the rule manually later. 
目的是将行动态添加到表中，以后再手动应用该规则不太好（也较慢）。
The specific example is that I am creating a tree table to represent a folder directory. 具体示例是我正在创建一个表示文件夹目录的树表。 Each folder is a div . 每个文件夹都是一个div 。 In each div , there is a ul with an li for each columns' information. 在每个div ，每个列的信息都有一个带li的ul 。 These li have a class name equivalent to the column name. 这些li具有与列名等效的类名。 This provides column width. 这提供了列宽。 I want to make the columns resizable however. 我想使列可调整大小。 I could do $('.className').css('width', newWidth) but then this wont apply to newly inserted items. 我可以做$('.className').css('width', newWidth)但是这不适用于新插入的项目。 Therefore, I want to modify the css rule. 因此，我想修改css规则。 How do I do this? 我该怎么做呢？
4 个解决方案
解决方案1
3 2011-11-22 09:36:31
jQuery isn't really for editing CSS in that way. jQuery并不是真的以这种方式编辑CSS。
It's possible to achieve what you want using .css() though. 不过，可以使用.css()实现所需的功能。 Don't change the width of individual elements, keep them 100% and resize their parent container, so any newly inserted items will be of width 100% and take the width of the parent container. 请勿更改单个元素的宽度，将其保持100％并调整其父容器的大小，因此任何新插入的项目的宽度将为100％，并采用父容器的宽度。
EDIT How are you dynamically inserting/updating rows? 编辑如何动态插入/更新行？ If you use .clone() on an existing row, the in-line css added by .css() should be included, meaning you won't have to resize. 如果在现有行上使用.clone() ，则应包括由.css()添加的.clone() css，这意味着您不必调整大小。
解决方案2
2 2011-11-22 09:37:08
I've used this library for modifying css rules directly and it does the trick (it's a pure javascript solution though): 我已经使用此库直接修改CSS规则，并且可以解决问题（尽管这是纯JavaScript解决方案）：
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
how the library modifies rules directly: 库如何直接修改规则：
document.styleSheets[i].cssRules[i].style.width=newWidth;
解决方案3
2 2011-11-22 09:49:32
You could set up your html document with an empty style tag that has an ID. 您可以使用具有ID的空样式标签来设置html文档。
<html>
<head>
<style id="styleTarget"></style>
</head>
Then "append" rules into it using jQuery. 然后使用jQuery将规则“附加”到其中。
var columName = "whatever-your-column-name-is"
$('#styleTarget').append('.'+columName+' { width: '+newWidth+' }' );
Gets a little messy if you're updating the width a lot, but the CSS parser will go with the last rule in the list, so .append() works for updating previous width assignments. 如果您要大量更新宽度，会有些混乱，但是CSS解析器将使用列表中的最后一条规则，因此.append（）可用于更新先前的宽度分配。 You could use .html() instead of .append() to overwrite the contents of the stylesheet. 您可以使用.html（）而不是.append（）来覆盖样式表的内容。
解决方案4
0 2011-11-22 09:49:04
jQuery cannot, unfortunately, directly manipulate CSS rules due to JavaScript native limitations; 不幸的是，由于JavaScript的固有局限性，jQuery无法直接操作CSS规则。 it's abilities extends to the DOM only which contains the elements of the page only, and as such not the CSS rules themselves (and even the CSS properties natively assigned to an element can be hard to obtain cross-browser). 它的功能仅扩展到仅包含页面元素的DOM，因此不能扩展CSS规则本身（甚至原生分配给元素的CSS属性也很难获得跨浏览器）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.