修改动态创建的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

回答

相关问题