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

Question

我在网页上动态插入一些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中添加规则,我将坚持使用cssjQuery 的方法.其他一些相关问题也提供了解决方案:

• 在运行时使用jQuery创建CSS规则/类
• 使用JavaScript或jQuery更改CSS规则

我不能真正使用jQuery插件,但如果可以,我肯定会使用jQuery.Rule

谢谢大家的宝贵帮助.

Answer 1

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

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

并设置类

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

Answer 2

这个:

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

Answer 3

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

创建 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');

我会保留 jQuerycss方法，以便您需要根据某种用户交互或其他动态事件来修改特定元素，这些事件要求您使用 JavaScript 变量的值来确定要应用的样式。因为看起来您已经知道如何设计它们的样式，所以让 CSS 来完成这项工作。