CSS가 동적으로로드되어 렌더링 된 후 javascript를 실행하십시오.

Question

CSS 파일을 동적으로로드하고 CSS가 인 후 js 스크립트를 실행하고 싶습니다.이 문서에 있습니다. 로드 된 CSS에 의해 설정된 요소의 새로운 너비와 높이를 사용하고 싶습니다. 렌더링 후에 js를 실행하는 것이 중요합니다. 가능한가? 나는 jQuery를 사용하고있다.

Answer 1

는 SidJS위한 작업 같은 소리 :

SidJS 한 수요에 자바 스크립트 스크립트와 CSS 스타일 시트를 포함 할 수있는 경량의 자바 스크립트 라이브러리입니다. 로딩 프로세스에 연결된 콜백을 지원하여 필요할 때로드중인 리소스를 사용할 수 있음을 보장합니다.

즉, 스타일 시트를 요청하고 콜백 기능을 제공합니다. 콜백 함수는 스타일 시트가로드 될 때 실행됩니다. 예 :

Sid.css("my-sheet.css", function() { 
    // Perform your width/height logic here. 
}); 

나는 문서가 콜백이 실행되는 시간에 다시 그리기 시간을 준 것이다 경우 완전히 확실하지 않다,하지만 당신은 그것을 밖으로 시도해야합니다. 최악의 시나리오 인 경우 setTimeout을 사용하여 논리를 100ms 정도 지연하면됩니다.

Answer 2

귀하의 필요를 이해합니다.하지만 모든 대안이 실패한 후에 만하기를 적극 권장합니다.

몇 개의 CSS 파일이 있습니까? 그들과 얼마나 다른가요?

CSS 파일을로드하는 대신 JS에서 스타일을 설정하는 것이 좋습니다.

JS가 CSS 파일에서로드 된 스타일을 알아야 할 필요가 있다면 JS는 해당 파일의 위치를 ​​알아야합니다. 파일 URL 대신 정보를 제공하는 것이 더 쉽지 않습니까?

페이지가로드 된 후로드 할 파일을 정확히 알 수없는 이유를 모른 채 대안에 대해 생각하기가 어렵습니다. 일부 사용자 입력을 기반으로하는 경우 클래스 집합에 대해 서로 다른 스타일의 CSS 파일을 사용하고 JS를 사용하여 요소 클래스를 변경함으로써 클래스 스타일을 제거하고 새 클래스 스타일을 적용 할 수 있습니다.

항상 모든 스타일을 고유 한 파일에 보관하여 체계적이고 컴팩트하게 유지하면서 항상 재사용을 시도하십시오. 그런 다음 JS를 사용하여 필요에 따라 스타일, 클래스 및 요소를 변경합니다.