Cách tốt nhất để thêm quy tắc css mới với jquery là gì?

Question

Tôi đang chèn động một số html trên trang web (sau khi tôi phát hiện sự kiện từ người dùng). Html này cần một số phong cách css và tôi tự hỏi cách sạch nhất để làm điều đó là gì, bằng cách sử dụng jQuery. Tôi không phải là nhà phát triển trang web, vì vậy tôi không thể thêm các quy tắc đó vào css gốc.

Giả sử tôi đã chèn một số html không có kiểu dáng, bao gồm lớp formElement. Tôi có thể viết trong tài liệu của tôi một <style> khối mới, ví dụ:

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

Hoặc, tôi có thể sử dụng phương pháp css:

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

Những giải pháp là/sạch tốt nhất?

EDIT:

Như tôi đã không thể trực tiếp thêm các quy tắc trong CSS, tôi sẽ gắn bó với phương pháp css của jQuery. Một số câu hỏi liên quan khác cung cấp các giải pháp cũng như:

• Create a CSS rule/class with jQuery at runtime
• Changing CSS Rules using JavaScript or jQuery

tôi có thể không thực sự sử dụng plugin jQuery, nhưng nếu tôi có thể, tôi chắc chắn sẽ sử dụng jQuery.Rule

Thank tất cả các bạn cho sự giúp đỡ quý giá của bạn.

Answer 1

Thành thật mà nói, cách tốt nhất có thể là không.Nếu tôi phải chọn một, phương pháp jquery css sẽ là lựa chọn của tôi, chỉ vì nó sạch hơn, tuy nhiên, hãy xem xét giải pháp thay thế này để có hiệu suất tốt hơn và mã tìm kiếm rõ ràng hơn:

Tạo các lớp CSS để thêm vào các yếu tố của bạn khi cần. Ví dụ:

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

sau đó, với jquery, khi bạn cần nó:

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

hoặc

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

tôi sẽ -dự trữ phương pháp jQuery css cho trường hợp mà bạn cần phải sửa đổi một yếu tố cụ thể dựa trên một số loại tương tác người dùng hoặc sự kiện động khác yêu cầu bạn sử dụng giá trị của các biến JavaScript để xác định kiểu bạn đang áp dụng. Vì có vẻ như bạn đã biết cách bạn muốn tạo kiểu cho chúng, hãy để CSS thực hiện công việc.

Answer 2

này:

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

Answer 3

tùy chọn thứ hai của bạn:

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

này đến nay là giải pháp sạch!

Answer 4

Sử dụng jquery .css(propertyName, value)

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

này là tốt nhất trong số các giải pháp mà bạn đã cung cấp.

TUY NHIÊN tôi sẽ đi để tạo một lớp học với tất cả những gì thuộc tính nói yourCSS và thêm lớp cho phần tử đó:

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

Answer 5

Không trộn lẫn css và js với nhau, đặc biệt là nếu tài sản của bạn don' t chứa tính hoặc các giá trị động: chỉ cần xác định một lớp CSS

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

và thiết lập các lớp

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

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)