gpt4 book ai didi

javascript - JSF 使用 Javascript 设置 CSS 样式?

转载 作者:太空宇宙 更新时间:2023-11-04 04:52:07 25 4
gpt4 key购买 nike

我一直在寻找是否可以使用 javascript 将 css 样式动态应用到 JSF 组件或 div,但没有成功。这可能吗。

这是伪代码

<div style="myJSStyleFunction("#{myBean.value}")"> stuff </div>

该函数会返回类似于“position:relative;left:25px;”的内容

我运气不好,也许无法完成,但希望获得第二意见。

编辑:


我正在尝试查看是否可以保持分离/减少表示/ View 与模型/ Controller 之间的耦合。这是为了缩进评论或产品评论(嵌套评论或评论的回复)。我最想跟踪的是一个关于回复深度的整数。第一级=0 第二级=1,依此类推。因此评论或产品评论的深度为 0,对评论或评论的回复为 1,依此类推。

然后在 EL 中我想调用一个 javascript 函数并做类似的事情

<script>
myJSStyleFunction(depth){
if(depth<=5){
var nest=20*depth;
var style="position:relative;left:" + nest + "px;";
return style;
}
}
</script>

然后说三级评论(对回复的回复)看起来像这样:

<div style="position:relative;left:40px;"> stuff </div>

在哪里

#{myBean.value}

计算为 2

我怀疑像 Daniel 所说的那样,我必须紧密耦合 View ,但我宁愿不必这样做。我认为必须有办法。但也许不是。

最佳答案

我不知道哪里有更清洁的解决方案。然而,这是一个建议。
假设您的页面如下所示,myBean.getValue()方法返回 integer .

<h:form id="frm">
   <div style="#{myBean.value}"> div1 </div>
   <div style="#{myBean.value}"> div2 </div>
</h:form>

所以你可以在'window.onload'做这样的事情。

<head>
<script>
window.onload = function() {
   var childList = document.forms['frm'].childNodes;
   for(var i = 0; i &lt; childList.length; i++) {
      if(childList[i].nodeName == 'DIV') {
         var _div = childList[i];
         var depth = _div.getAttribute('style');
         _div.setAttribute('style', 'position:relative;left:' +(depth *20)+ 'px;');
      }
   }
}
</script>
</head>

注:
1。在上面的示例代码中,我假设所有 DIV表格内的 s 应该缩进。
2. 对于 IE,您可能需要使用 _div.style.setAttribute('cssText','position:relative;left:' +(depth *20)+ 'px;')
3. 您问题的另一种解决方案是使用 <script>在 div 之后立即标记并将 js 部分放入其中。这样你就不必使用假样式 style="#{myBean.value}"window.onload事件,因为您可以直接调用 #{myBean.value}在你的脚本中。

关于javascript - JSF 使用 Javascript 设置 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13278223/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com