jQuery를 사용하여 CSS 규칙 정의 변경

Question

예를 들어 표를 시뮬레이트하기 위해 많은 요소의 너비를 변경한다고 가정 해 보겠습니다. 나는 당신이 할 수있는 실현 :

$(".class").css('width', '421px'); 

이 각 요소의 인라인 style='width: 421px;' 속성 을 변경합니다. 이제, 내가하고 싶은 것 : 실제 CSS 규칙 정의를 변경할 수 있습니다 :이 될 것 같은 중첩 된 <ul> 및 필요 <li> 아닌 1000 년대가 변경 될 경우 100 년대에 올 때

.class { 
    width: 375px; ==[change to]==> 421px; 
} 

을 것 같습니다 .css() 메소드를 통해 jQuery가 작업을 수행하는 것보다 성능이 더 좋습니다.

것은 내가 this example 발견했습니다 - 이것이 내가 할 노력하고있어입니다 : 나는 모든 최적의 클래스를 가질 수 없기 때문에,

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style); 

내가 ($el.removeClass().addClass()를) 클래스를 교체하려고하지 않아요 너비 (379px, 387px, 402px ..).

나는 <style> 요소를 만들고 동적으로 너비를 설정할 수 있지만 더 좋은 방법이 있다고 생각합니다.

Answer 1

네이티브 JS 방법 : 아리엘 Flesler 의해 can jquery manipulate the global css definition of the document?

jQuery를 플러그인 : https://github.com/flesler/jquery.rule

Answer 2

document.styleSheets [0] .addRule FF

크롬 '이 아닌 기능'에 작품

Answer 3

무엇 나를위한 작품 헤더에 빈 스타일 블록을 포함하는 것입니다 :

<style id="custom-styles"></style> 

그리고이 같은 뭔가가 조작 :

$('#custom-styles').text('h1 { background: red }') 

나는이 크롬 (물론, 크롬 - 63.0)의 현재 버전에서 작업 표시 테스트 한 파이어 폭스 (57.0.4).