CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chacham15
chacham15

Reputation: 14251

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. In each div, there is a ul with an li for each columns' information. These li have a class name equivalent to the column name. 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. Therefore, I want to modify the css rule. How do I do this?

Upvotes: 0

Views: 931

Answers (4)

StuperUser
StuperUser

Reputation: 10850

jQuery isn't really for editing CSS in that way.

It's possible to achieve what you want using .css() though. 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.

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.

Upvotes: 3

Christopher Tokar
Christopher Tokar

Reputation: 11887

I've used this library for modifying css rules directly and it does the trick (it's a pure javascript solution though):

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

how the library modifies rules directly:

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

Upvotes: 2

mattsahr
mattsahr

Reputation: 528

You could set up your html document with an empty style tag that has an ID.

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

Then "append" rules into it using 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. You could use .html() instead of .append() to overwrite the contents of the stylesheet.

Upvotes: 2

Sune Rasmussen
Sune Rasmussen

Reputation: 954

jQuery cannot, unfortunately, directly manipulate CSS rules due to JavaScript native limitations; 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).

Upvotes: 0

Related Questions