Adobe Experience Manager (cms)에 대한 javascript - design 접근 방식을 사용하는 인라인 스타일

Question

Adobe에서받은 회사의 구성 요소에 대한 버그가 수정되었습니다. 이 구성 요소에 대한 세부 정보 : 탐색기 [캐 러셀 탐색기]에 번호가 매겨진 회전식 구조입니다. 따라서 회전식 캐노피는 javascript를 사용하여 네비게이터를 완전히 구축하고 있습니다. div의 <div class="carousel"><div class="pane"><div id="textimage_xyzzz"></div><div class="grotatorNav"></div></div></div>

의

구조 때문에 버그들이 설계 한 인 '.grotatorNav'등의 '위치는 절대'와 '상단은 160 픽셀이다'그리고 '.carousel'가 항상 고정되어 있다는 '높이 : 300px 및 너비 : 700px'그 라이터는 회전식으로 절대적이며 항상 동일한 높이의 160px입니다.

이 나는 ​​창에서 [텍스트 이미지 CMS 작성자가 조정할 수있는 또 다른 요소입니다]는 "textimage"에 따라 변화로 '.pane'높이를 사용하여

이것을 조정하고 싶었다 그래서 내가 수행 한, 그것은 인라인 스타일을 소개하고 또한 미래에 우리가 자신의 파일에있는 모든 스타일과 스크립트 .CSS 원하기 때문에

var heightOfPane = $('.pane').height(); 
$('#'+componentId+' .gRotatorNav').css('top',heightOfPane); 

} 이 올바른지 .less 된 .js입니다보다는에 clientlibs 분산 AEM.

저는 더 많은 백엔드 엔지니어이지만 AEM 개발자로서 FED 워터를 만지고 있습니다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

요소 조작을 시작하기 전에 DOM이 완전히로드되었는지 확인하기 위해 jQuery 코드를 $(document).ready() 내에서 실행해야합니다.

height() 대신에 jQuery의 outerHeight()을 사용하는 것이 좋습니다. 후자에는 패딩과 테두리가 없기 때문입니다.

$(function() { 
    var heightOfPane = $('.pane').outerHeight(); 
    $('#'+componentId+' .gRotatorNav').css('top',heightOfPane); 
}); 

참고 : 위의 구문은 다음과 같이 그래서 당신은 (more info)를 사용할 수 있습니다 $(document).ready()을위한 속기이다.