使用 jquery 添加新 css 规则的最佳方法？答案

【问题标题】：Best way to add new css rules with jquery?使用 jquery 添加新 css 规则的最佳方法？
【发布时间】：2012-12-17 15:30:22
【问题描述】：

我在网页上动态插入一些 html（在我检测到来自用户的事件之后）。这个 html 需要一些 css 样式，我想知道使用 jQuery 最干净的方法是什么。我不是网站开发者，所以无法将这些规则添加到原始 css 中。

假设我已经插入了一些没有样式的 html，包括 formElement 类。我可以在我的文档中写一个新的<style> 块，例如：

my_html =  '<style type="text/css">';
my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
my_html += '</style>';
my_html = $(my_html);
$('body').prepend(my_html);

或者，我可以使用css 方法：

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

哪种解决方案最好/最干净？

编辑：

由于我不能直接在 CSS 中添加规则，所以我会坚持使用 jQuery 的 css 方法。其他一些相关问题也提供了解决方案：

我真的不会使用 jQuery 插件，但如果可以，我肯定会使用jQuery.Rule

感谢大家的宝贵帮助。

【问题讨论】：

如果您稍后在该类中添加更多元素，您的第二个代码将不起作用。
还要考虑第二个选项将具有更多的特异性，因为它是内联的。

标签： javascript jquery css

【解决方案1】：

这个：

$('.formElement').css({
        'display': 'block',
        'width': '240px',
        'position': 'relative',
        'padding': '4px 0'
    });

【讨论】：

在必要时很难以这种方式进行@media 查询*

【解决方案2】：

您的第二个选择：

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

这是迄今为止最干净的解决方案！

【讨论】：

【解决方案3】：

使用 jquery .css( propertyName, value )

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

这是您提供的解决方案中最好的。

但是我会去创建一个具有所有属性的类，例如yourCSS，并将该类添加到该元素：

$('.formElement').addClass('yourCSS');

【讨论】：

【解决方案4】：

不要将 css 和 js 混合在一起，特别是如果您的属性不包含计算值或动态值：只需定义一个 CSS 类

.mystyle {
    display: block;
    width: 240px;
    position: relative;
    padding: 4px 0;
}

并设置类

$('.formElement').addClass('mystyle');

【讨论】：

当然有这个问题，用 jquery 定义新的 css 类的最佳方法是什么？
Fabrizio 解决方案与 OP 的需求相同，并且与他的两个选项相同。它会比OP发布的更快。他没有将样式属性赋予元素，而是添加了一个包含元素属性的类。同样的事情，更好的代码组织。
@AndréSilva 绝对。我们在 2013 年，标记、css 和脚本汤的时代已经一去不复返了。 :)
@BeniBela：这个问题回答得很好here。

【解决方案5】：

老实说，最好的方法可能都不是。如果我必须选择一个，jquery css 方法将是我的选择，因为它更干净，但是，考虑这个替代方案以获得更好的性能和更简洁的代码：

创建 CSS 类以在需要时附加到您的元素。例如：

.formElementAlpha {  
  width:240px;
  padding:4px 0;
}
.formElementBravo {
  width:400px;
  height:50px;
  padding:20px 0;
  line-height:50px;
  font-size:30px;
}

然后，使用 jquery，当你需要它时：

$('.formElement').addClass('formElementAlpha');

或

$('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');

我会保留 jQuery css 方法用于需要根据某种用户交互或其他动态事件修改特定元素的情况，这些事件需要您使用 JavaScript 变量的值来确定您的样式申请。由于看起来您已经知道要如何设置它们的样式，因此让 CSS 来完成这项工作。

【讨论】：

感谢您的详细解答。我想你不喜欢这两种方法是对的。我喜欢你的建议，但问题是我不是网站开发人员，所以我无法创建 CSS 类。我只能通过 javascript 与页面进行交互...但我会在其他项目中记住这一点！
你最好的选择可能是采用here列出的方法，然后，它适用于我遇到的任何浏览器。

【解决方案6】：

HTML

<style id="customCSS"> ... </style>

JS

my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
$('#customCSS').html(my_html)

【讨论】：