使用 javascript 的内联样式 - Adobe Experience Manager(cms) 的设计方法

Question

我正在修复我公司从 Adobe 获得的自定义组件的错误。关于此组件的详细信息：它是一个旋转木马，带有导航器[carousel navigator] 编号。因此轮播完全使用 javascript.

构建其导航器

div 的结构<div class="carousel"><div class="pane"><div id="textimage_xyzzz"></div><div class="grotatorNav"></div></div></div>

所以错误是他们设计了“.grotatorNav”，使其 'position is absolute' 和 'top is 160px' 以及“.carousel”始终固定为 'height : 300px and width: 700px' .

我想通过使用“.pane”高度来调整它，因为它根据窗格中的 "textimage" 变化 [文本图像是 CMS 作者可以调整的另一个组件]，

所以我所做的是

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

} 这是正确的吗，因为它引入了内联样式，而且将来我们希望所有样式和脚本都在它们自己的文件中。css、.less、.js，而不是分布在 AEM 中的 clientlib 中。

我更像是后端工程师，但作为 AEM 开发人员，我正在接触 FED 领域。任何帮助将不胜感激。

Answer 1

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

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

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

注意：上面的语法是 $(document).ready() 的 shorthand，因此您可以按原样使用它 (more info)。

Inline style using javascript - design approach for Adobe Experience Manager(cms)