9

我在网页上动态插入一些 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 插件，但如果可以，我肯定会使用jQuery.Rule

感谢大家的宝贵帮助。

4

6 回答 6

10

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

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

并设置类

$('.formElement').addClass('mystyle');
于 2013-01-03T09:28:17.437 回答
7

这：

$('.formElement').css({
        'display': 'block',
        'width': '240px',
        'position': 'relative',
        'padding': '4px 0'
    });
于 2013-01-03T09:26:14.457 回答
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');

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

于 2013-01-03T09:36:18.483 回答
2

你的第二个选择：

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

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

于 2013-01-03T09:26:54.910 回答
2

使用 jquery .css(propertyName, value)

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

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

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

$('.formElement').addClass('yourCSS');
于 2013-01-03T09:27:07.620 回答
1

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)
于 2015-07-28T14:35:02.917 回答