JSF使用Javascript设置CSS样式？

我一直在寻找没有成功，看看我是否可以使用JavaScript动态地将CSS样式应用于JSF组件或div。这可能吗。JSF使用Javascript设置CSS样式？

这是伪代码

<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

我怀疑像丹尼尔说过，我必须紧紧结合观点，但我宁愿不必。我认为必须有一种方法。但也许不是。

来源

2012-11-07 BillR

什么是最终呈现的输出HTML？ – Dai

@戴我增加了更多的信息，你问，看看我更新的问题。 – BillR

你是什么意思**动态应用CSS样式**？什么是事件？你的意思是当页面加载？ – prageeth

我决定跳过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-12 04:35:06 BillR

我不知道哪里有更清洁的解决方案。但这是一个建议。
假设您的页面如下所示，并且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 < 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.针对您的问题的另一个解决方案是在div后立即使用<script>标记，并将js部分放入其中。通过这种方式，您不必使用假造型style="#{myBean.value}"或window.onload事件，因为您可以直接在脚本中调用#{myBean.value}。

来源

2012-11-08 05:45:46 prageeth

您的想法看起来非常有趣，但我有一个想法如何在没有JavaScript的情况下做到这一点。我想我也喜欢你的想法。现在，我在解决方案的层次查询中遇到了一些麻烦。一旦我明白了这一点，我会尝试我的解决方案，并将其发布，如果它有效，然后尝试解决您的解决方案。 – BillR

我会给你一个回复。不知道它是否工作，因为我决定现在不使用JavaScript。当我有时间的时候，仍然会试试这个，但它可能会持续几周或一两个月。我已经决定了一个更简单的根，因为我已经在添加注释时跟踪了注释深度，所以我只是检索它们并将值连接到css类的“基本名称”。我发布了我正在做的答案。 – BillR

JSF使用Javascript设置CSS样式？

回答

相关问题