如何在jQuery中編輯css規則？

其目的是將行動態添加到表中，並且不如以後手動應用規則那樣更好（也更慢）。如何在jQuery中編輯css規則？

具體示例是，我正在創建一個樹表來表示文件夾目錄。每個文件夾是div。在每個div中，有一個ul，每個列的信息有li。這些li具有與列名相同的類名。這提供了列寬。我想讓列的大小可以調整。我可以做$('.className').css('width', newWidth)，但這不適用於新插入的項目。因此，我想修改css規則。我該怎麼做呢？

來源

2011-11-22 chacham15

你說''行被動態地添加到表格中'「，然後」'每個文件夾是一個div。在每個div中，都有一個帶有li'的ul「，是否有任何理由說明你沒有標記使用'table'填充表格內容？ – StuperUser

我的賭注是：由於速度;）桌子非常緩慢地被渲染，即使在字符串操作。 – roselan

@roselan引文需要。我懷疑他們對於OP所描述的內容過於樂觀或者甚至遲緩。 – StuperUser

jQuery並不是真正以這種方式編輯CSS的。

雖然可以用.css()來實現你想要的。不要更改單個元素的寬度，將它們保持爲100％並調整它們的父容器大小，因此，任何新插入的項目都將具有寬度100％，並取得父容器的寬度。

編輯你是如何動態插入/更新行？如果在現有行上使用.clone()，則應該包含由.css()添加的內嵌css，這意味着您不必調整大小。

來源

2011-11-22 09:36:31 StuperUser

這不會工作，正如我上面解釋的，文件（行）包含在文件夾中，意思是100％寬度是整行。 – chacham15

哦，我明白了。其他專欄'李'需要在這兩個調整大小？他們可以有一個靜態寬度，並讓信息的''li是擴展的元素。如果它是表格，爲什麼你沒有使用表格？ – StuperUser

是的，我想列可以調整大小。爲表格數據使用div的原因是該表格是一個樹形表格，這意味着單擊「打開」鏈接將打開一個文件夾並顯示子行。爲了有效地做到這一點，我使用div。 – chacham15

我用這個庫直接修改CSS規則和它的伎倆（這是一個純JavaScript解決方案雖然）：

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

圖書館如何修改直接規則：

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

來源

2011-11-22 09:37:08

我的firebug調用getCSSRule操作不安全。你知道爲什麼嗎？ –

你是否正在修改不同doman的css文件？ http://en.wikipedia.org/wiki/Same_origin_policy如果這樣可以解釋爲什麼... –

不，所有本地和相同的域 –

不幸的是，由於JavaScript原生的限制，jQuery不能直接操作CSS規則;它的功能只擴展到只包含頁面元素的DOM，而不是CSS規則本身（甚至原生分配給元素的CSS屬性可能很難獲得跨瀏覽器）。

來源

2011-11-22 09:49:04

實際上，您可以直接使用document.styleSheets和styleSheet.cssRules操作CSS規則 - 這些是也是DOM的一部分（參見我的回答） –

您可以使用具有ID的空白樣式標籤來設置您的html文檔。

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

然後使用jQuery將「append」規則添加到它中。

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

變得有點混亂，如果你在更新寬度的很多，但CSS解析器將與列表中的最後一個規則去，所以.append（）的作品用於更新先前的寬度分配。您可以使用.html（）而不是.append（）來覆蓋樣式表的內容。

來源

2011-11-22 09:49:32 mattsahr

是的，這是我想要做的事，我只是希望有一個更好的方法 – chacham15

如何在jQuery中編輯css規則？

回答

相關問題