jQuery에서 특정 스타일로 동적으로 클래스 정의하기

Question

jQuery를 사용하여 특정 스타일 속성을 가진 클래스를 동적으로 정의 할 수 있습니까?

일단 모든 요소가 만들어지면 스크립트의 끝에서 클래스의 속성을 설정할 수 있지만 가장 좋은 방법은 무엇입니까? 스크립트 시작 부분에 $('.class').css('property','value');으로 클래스 스타일을 정의하면 .class 클래스의 요소가 아직 작성되지 않았으므로 아무 일도 발생하지 않습니다. 맞습니까?

Answer 1

적절한 방법은 CSS를 사용하는 것입니다. 당신은 속성의 무리를 가지고 클래스 "foo는"을 가진 요소를 원하는 경우, 다음 CSS 파일에서 이러한 속성을 넣어 적절한 선택과 연결 :

.yourClass { 
    font-weight: bold; 
    color: green; 
} 

동적으로이 작업을 수행해야하는 경우가 가능합니다 Javascript로 CSS 블록을 작성하십시오.페이지에 <style> 요소를 넣고 그에게 "ID"값 제공 :

<style id='dynamicStyle'></style> 

그런 다음 당신이 jQuery를 함께 설정할 수 있습니다

$('#dynamicStyle').text(".yourClass { font-weight: bold; }"); 

Answer 2

확실한 이유는 확실하지만 예 - 요소를 만든 후에는 스크립트를 호출해야합니다. 이 문서의 끝 부분에있는 스크립트를하지 않으려면, 그래서 한 번 모든 HTML이로드 화재 속기에게 대안

$(function() { 
... 
}); 

을

$(document).ready(function() { 
... 
}); 

에 포장 또는.

Answer 3

내가 이해한다면 특정 요소에 스타일을 추가하려고합니다.

이렇게하려면 .css(a,b)을 사용할 필요가 없습니다. jQuery에는 원하는 요소에 클래스를 추가하는 addClass("className");이라는 함수가 있습니다.

$('.originalClass').addClass('addedClass'); 

원본을 덮어 쓰지 않습니다.

원하는 것을 원하십니까?

---

편집 :

아니면 당신이 자바 스크립트 스타일 시트를 수정하려는 건가요?

그런 경우 스타일 시트 속성 수정을위한 javascript 규칙이 있습니다.

(어떤 이유로) 스타일 시트를 변경할 수 없다면, 단순히 스타일을 객체에 저장하고 적용 할 수 있습니다.

var stylesToAdd = { background:"orange", border:"1px solid blue" } 

그리고 적용하려면 .css()을 사용하십시오.

$('#myElement').css(stylesToAdd);