jQuery (또는 JS)로 CSS를 작성하여 현재 및 미래의 일치 항목에 적용하려면 어떻게해야합니까?

Question

화면 높이에 따라 .selected 요소의 높이를 동적으로 설정하고 싶습니다. $('.selected').css('height', height); 및 $('.selected').height(height);이 작동하지만 다른 요소가 .selected이되면이 규칙의 영향을받지 않습니다.

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(document.head); 
... 
// change the height later 
s.remove(); 
s = $('<style>.selected{height:'+new_height+'px}</style>').appendTo(document.head); 

이 작업을 수행 할 수있는 더 나은 방법이 있나요 :

는 다음과 같이 내가 정말로 원하는 무엇입니까?

Answer 1

document.styleSheets[0].insertRule(".selected{height:"+new_height+"px}", 0); 또는 그 유사 물을 사용할 수 있습니다. You can read more about manipulating stylesheets with insertRule here

일반적으로 당신이하고있는 일은 훌륭합니다. 내가 너라면 너의 스타일 요소에 대한 언급을 유지하고 다음과 같이 새 것으로 바꿀거야 :

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(head); 
... 
// change the height later 
s.replaceWith('<style>.selected{height:'+new_height+'px}</style>');