0

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

这是伪代码

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

并且该函数将返回类似“位置：相对；左：25px；”的内容

我没有运气，也许无法完成，但想要第二个意见。

编辑：

我正在尝试查看是否可以保持分离/减少演示/视图与模型/控制器之间的耦合。这是为了缩进评论或产品评论（嵌套回复评论或评论）。我最想跟踪的是一个关于回复深度的整数。第一级 = 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

我怀疑就像丹尼尔说的那样，我必须紧密结合视图，但我宁愿不必这样做。我想一定有办法。但也许不是。

4

2 回答 2

2

我不知道哪里有更清洁的解决方案。然而，这是一个建议。
假设您的页面如下所示，并且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}在脚本中调用。

于 2012-11-08T05:45:46.887 回答
0

我决定跳过 javascript 方法并选择一种更简单且我认为更简洁的方法来为我的情况创建动态 css 类。我已经在输入每个评论时捕获/计算了它的深度值。所以我只是在 EL 中返回该值并将其连接到 css 类的“基本名称”，如下所示：

<div class="indent_#{(comment.commentDepth le 5) ? comment.commentDepth : 5}" >
    comment comment blah blah blah
</div>

“indent_”是 css 类的基本名称。因此，对于 0 级评论，它将有一个class="indent_0". 对该评论的回复将有class="indent_1"。

我使用三元组，这样如果给定评论下有很多回复，它就不会从页面右侧缩进。即使您可以继续深入，它也最多只能缩进 5 级。

对于我目前的情况，这是一种添加一些动态生成的 css 类名的更简单、更简洁的方法。现在我必须在 css 文件中为此定义 6 个类，但也许我会弄清楚如何嵌套这些框，但这不是优先级，这对我来说现在很好。

于 2012-11-12T04:35:06.567 回答