修改動態創建的jQuery的複選框按鈕的CSS

我創建了一系列的jQuery的複選框在一個循環中，像這樣：修改動態創建的jQuery的複選框按鈕的CSS

var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id); 
panel.append(checkbox); 
panel.append($('<label>').attr({for: checkbox_id}).html(checkbox_name); 
checkbox.button();

我有一個名爲my-style CSS類定義像border-radius，padding和line-height事情。我想要my-style覆蓋由jQuery主題定義的屬性，僅用於我創建的複選框。

我試過checkbox.addClass("my-style");和panel.find(".ui-button-text").addClass("my-style")，但都沒有正常工作。一些css屬性會覆蓋jQuery的默認值，比如border-radius，其他的似乎不能像line-height和padding那樣被覆蓋。我甚至試圖直接通過panel.find(".ui-button-text").css("line-height", 1.0);強制執行css屬性，但這根本不起作用。

據我所知，我可以直接修改jQuery主題，通過改變那裏的CSS代碼，但這樣做會影響所有按鈕，這不是我想要做的。

UPDATE：

一個我已經設法解決這個問題的方法是通過直接指定style標籤。所以，上面的代碼變成：

var checkbox = $('<input>').attr({type: 'checkbox', 
            id: checkbox_id}); 
panel.append(checkbox); 
var label = $('<label>').attr({for: checkbox_id, 
           style: "font-size: 0.6em; border-radius: 0px; margin-right: 0.3em;"}).text(checkbox_name); 
panel.append(label); 
checkbox.button(); 
label.children().attr("style", "padding: 0.2em 0.4em;");

雖然這種解決方案的工作，這是令人厭惡的，因爲我混合JavaScript和CSS代碼放在一起。

通過編寫style屬性，我可以重寫jQuery UI的CSS。這裏討論的一件事是使用更具體的CSS選擇器，它比jQuery UI的CSS類具有更多的權重。更具體的選擇器將是具有複選框的ID。這種方法的問題是複選框是動態生成的，複選框ID也是如此。因此，根據我的理解，有更具體的CSS選擇器是不可行的。

來源

2011-12-22 Samad Lotia

您是否嘗試過使用'！important'聲明想要覆蓋的css屬性？ – 2011-12-22 22:47:37

問題是類沒有被應用到元素，或者類沒有做你想做的事情？

如果是後者，你可以粘貼你的課程的CSS代碼？

來源

2011-12-22 22:47:16 kclair

.cy_tag_button { font-size：0.6em; 填充：0。2em的; border-radius：0px; line-height：1; } – 2011-12-22 22:53:05

使用Web Inspector或Firebug並查看哪些類正在覆蓋您在.cy_tag_button中定義的樣式。這看起來像你使用jQuery UI，因此可能會有更多的類定義在你的元素上，這些類可能會有一個更具體的選擇器，用於你在.cy_tag_button中定義的屬性。 – Phunky 2011-12-23 12:34:45

指定更具體的選擇器的問題是每個複選框都必須有自己的ID才能使用'label'標籤。我將如何解決這個問題？ – 2011-12-27 04:09:34

這聽起來像你的CSS選擇器是不夠具體，你在這裏

兩個選項是很討厭，並宣佈你的CSS屬性！重要的是要超越別的選擇
寫一個更具體的CSS選擇器

後者是更好的選擇，因爲您將在後期對您的造型有更多的控制權。如果你對CSS選擇器知之甚少，請閱讀本文（http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html），這有助於理解編寫更具體的選擇器和每種選擇器類型的值。

來源

2011-12-22 22:57:33 Phunky

修改動態創建的jQuery的複選框按鈕的CSS

回答

相關問題