在 jQuery 中动态定义具有特定样式的类

Question

是否可以使用jQuery动态定义具有特定样式属性的类，而不是使用该类设置所有元素的样式？

创建完所有元素后，我可以在脚本末尾设置类的属性，但这是最好的方法吗？如果我在脚本开头使用$('.class').css('property','value'); 定义类的样式，则不会发生任何事情，因为尚未创建类.class 的元素，对吧？

Answer 1

正确的方法是使用 CSS。如果您希望具有“foo”类的元素具有一堆属性，则将这些属性放在 CSS 文件中并将它们与适当的选择器相关联：

.yourClass {
  font-weight: bold;
  color: green;
}

如果您需要动态执行此操作，可以使用 Javascript 编写 CSS 块。在你的页面中放置一个<style> 元素并给它一个“id”值：

<style id='dynamicStyle'></style>

然后你可以用jQuery来设置它：

$('#dynamicStyle').text(".yourClass { font-weight: bold; }");

Answer 2

如果我理解你的话，你想为特定元素添加样式。

您不必使用.css(a,b) 来执行此操作。 jQuery 有一个名为addClass("className"); 的函数，它可以为你想要的任何元素添加一个类。

$('.originalClass').addClass('addedClass');

它不会覆盖原来的。

这是你想要的吗？

---

编辑：

或者你是说你想用javascript修改你的样式表？

如果是这种情况，有修改样式表属性的 javascript 规则。

如果您（出于某种原因）无法更改样式表，那么也许您可以简单地将您的样式存储在一个对象中，然后应用它。

var stylesToAdd = { background:"orange", border:"1px solid blue" }

并使用.css() 应用它们。

$('#myElement').css(stylesToAdd);

Answer 3

不确定您的原因是什么，但是是的 - 您必须在创建元素后调用脚本。如果您不想将脚本放在文档末尾，请将其包装在

$(document).ready(function() {
 ...
});

或者，或者，简写

$(function() {
 ...
});

所以它会在所有 HTML 加载完毕后触发。