使用javascript的内联样式 - Adob​​e Experience Manager（cms）的设计方法

Question

我正在修复我公司从Adobe获得的自定义组件的错误。 有关此组件的详细信息：它是一个传送带，带有导航器[传送带导航器]编号。所以旋转木马正在使用JavaScript完全构建其导航器。的div <div class="carousel"><div class="pane"><div id="textimage_xyzzz"></div><div class="grotatorNav"></div></div></div>

的

结构Bug被 他们设计了“.grotatorNav”，使得它的立场是绝对的'和‘顶部160像素’和“.carousel”始终是固定的，以'高度：300px和宽度：700px'grotator对旋转木马绝对是绝对的，并且始终处于160px的相同高度。

我希望通过该窗格中使用“.pane”的高度，因为它正在改变，因为按照‘textimage’[文字图像的另一个部件，其中该CMS作者可以调整]调整此，

所以我这样做是

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

} 这是正确的，因为它是引进内联样式以及在未来，我们希望在自己的文件中的所有样式和脚本的CSS，.LESS，.JS而不是clientlibs之间的分配AEM。

我更多的是后端工程师，但作为一名AEM开发人员，我正在触摸FED水域。任何帮助将不胜感激。

Answer 1

看起来很好，只有您的jQuery代码必须在$(document).ready()内运行，以确保DOM在您开始操作元素之前完全加载。

你也可以考虑使用jQuery的outerHeight()而不是height()，因为后者不包括填充和边框。

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

注：以上的语法是$(document).ready()的简写，所以你可以把它当作是（more info）。