Javascript 使用 jquery 添加新 css 规则的最佳方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14136042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to add new css rules with jquery?
提问by clement g
I am dynamically inserting some html on a web page (after I detect an event from the user). This html needs some css styling and I am wondering what is the cleanest way to do it, using jQuery. I am not the website developer, so I can't add those rules to the original css.
我在网页上动态插入一些 html（在我检测到来自用户的事件之后）。这个 html 需要一些 css 样式，我想知道使用 jQuery 最干净的方法是什么。我不是网站开发人员，所以我无法将这些规则添加到原始 css 中。
Assume I have already inserted some html without styling, including a formElementclass. I can write in my document a new <style>block, for instance:
假设我已经插入了一些没有样式的 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);
Or, I can use the cssmethod:
或者，我可以使用以下css方法：
$('.formElement').css({
'display': 'block',
'width': '240px',
'position': 'relative',
'padding': '4px 0'
});
Which solution is the best/cleanest?
哪种解决方案最好/最干净？
EDIT:
编辑：
As I can't directly add the rules in the CSS, I will stick with the cssmethod of jQuery. Some other related questions provide solutions as well:
由于我不能直接在CSS中添加规则，我将坚持使用cssjQuery的方法。其他一些相关问题也提供了解决方案：
I can't really use jQuery plugins, but if I could, I would certainly use jQuery.Rule
我不能真正使用 jQuery 插件，但如果可以，我肯定会使用jQuery.Rule
Thank you all for your precious help.
感谢大家的宝贵帮助。
采纳答案by dev_row
Honestly, the best way may be neither. If I had to pick one, the jquery cssmethod would be my choice, just because it's cleaner, however, consider this alternative for better performance and cleaner looking code:
老实说，最好的方法可能两者都不是。如果我必须选择一个，jquerycss方法将是我的选择，只是因为它更干净，但是，请考虑使用此替代方法以获得更好的性能和更清晰的代码：
Create CSS classes to append to your elements when needed. For example:
创建 CSS 类以在需要时附加到您的元素。例如：
.formElementAlpha {
width:240px;
padding:4px 0;
}
.formElementBravo {
width:400px;
height:50px;
padding:20px 0;
line-height:50px;
font-size:30px;
}
then, with jquery, when you need it:
然后，使用 jquery，在您需要时：
$('.formElement').addClass('formElementAlpha');
or
或者
$('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');
I would reserver the jQuery cssmethod for instances where you need to modify a specific element based on some sort of user interaction or other dynamic event that requires you to use the value of your JavaScript variables to determine the styles you are applying. Since it looks like you already know how you want to style them, let CSS do the work.
css对于需要根据某种用户交互或其他动态事件修改特定元素的情况，我会保留 jQuery方法，这些事件要求您使用 JavaScript 变量的值来确定您正在应用的样式。既然您似乎已经知道要如何设置它们的样式，那么让 CSS 来完成这项工作。
回答by Fabrizio Calderan
Don't mix css and js together, especially if your properties don't contain computed or dynamic values: just define a CSS class
不要将 css 和 js 混合在一起，特别是如果您的属性不包含计算值或动态值：只需定义一个 CSS 类
.mystyle {
display: block;
width: 240px;
position: relative;
padding: 4px 0;
}
and set the class
并设置类
$('.formElement').addClass('mystyle');
回答by Klevis Miho
This:
这个：
$('.formElement').css({
'display': 'block',
'width': '240px',
'position': 'relative',
'padding': '4px 0'
});
回答by Gaz Winter
Your second option:
你的第二个选择：
$('.formElement').css({
'display': 'block',
'width': '240px',
'position': 'relative',
'padding': '4px 0'
});
This is by far the cleanest solution!
这是迄今为止最干净的解决方案！
回答by bipen
Use jquery .css( propertyName, value )
使用 jquery .css( propertyName, value )
$('.formElement').css({
'display': 'block',
'width': '240px',
'position': 'relative',
'padding': '4px 0'
});
this is best among the solutions that you have provided.
这是您提供的解决方案中最好的。
HOWEVERI would go for creating a class with all that properties say yourCSSand add the class to that element:
但是，我会去创建一个具有所有属性yourCSS的类，并将该类添加到该元素中：
$('.formElement').addClass('yourCSS');
回答by Mohammed Magdy
HTML
HTML
<style id="customCSS"> ... </style>
JS
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)
