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中添加规则，因此我将坚持使用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

老实说，最好的方法可能都不是。如果我必须选择一个，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完成工作。

Answer 4

您的第二个选择：

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

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

Answer 5

使用jquery .css( propertyName, value )

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

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

HOWEVER 我会创建一个包含yourCSS所有属性的类，并将该类添加到该元素中：

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

Answer 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)

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

6 个答案: