修改动态创建的jQuery复选框按钮的css

时间:2011-12-22 22:42:48

标签: javascript jquery css jquery-ui

我正在循环中创建一系列jQuery复选框,如下所示:

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-radiuspaddingline-height等内容。我希望my-style仅覆盖我创建的复选框,覆盖jQuery主题定义的属性。

我尝试了checkbox.addClass("my-style");panel.find(".ui-button-text").addClass("my-style"),但都没有正常工作。某些css属性会覆盖jQuery的默认值,例如border-radius,而其他css属性似乎无法像line-heightpadding那样被覆盖。我甚至试图通过panel.find(".ui-button-text").css("line-height", 1.0);直接强制执行css属性,但这根本不起作用。

我明白我可以通过更改那里的css代码直接修改jQuery主题,但这样做会影响所有按钮,这不是我想做的。

更新:

我设法解决此问题的一种方法是直接指定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选择器是不可行的。

2 个答案:

答案 0 :(得分:0)

该类未应用于该元素的问题,或该类未执行您希望它执行的操作的问题?

如果是后者,你可以粘贴你班级的css代码吗?

答案 1 :(得分:0)

听起来你的CSS选择器不够具体,你有两个选择

  1. 讨厌并声明你的CSS属性,重要的是覆盖其他任何选择的
  2. 编写更具体的CSS选择器
  3. 后者是更好的选择,因为您可以在稍后阶段更好地控制您的样式。如果您对CSS选择器不太了解,请阅读本文(http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html),这应该有助于理解编写更具体的选择器和每个选择器类型的值