Is it possible to dynamically apply a CSS style to a JSF component or div using Javascript? I have been searching without any success.
Below is some pseudo code:
<div style="myJSStyleFunction("#{myBean.value}")"> stuff </div>
The function would return something like "position:relative;left:25px;"
I haven't had much luck and am wondering if it's even feasible. A second opinion would be appreciated.
Edit:
I want to maintain a separation/reduce coupling between presentation/view and model/controller. This is for indenting comments or product reviews (to nest replies). The goal is to track the depth of a reply, where the first level is 0, the second level is 1, and so on.
In EL, I aim to call a JavaScript function and do something like this:
<script>
myJSStyleFunction(depth){
if(depth<=5){
var nest=20*depth;
var style="position:relative;left:" + nest + "px;";
return style;
}
}
</script>
For example, for a third-level comment, it would look like this:
<div style="position:relative;left:40px;"> stuff </div>
where
#{myBean.value}
evaluates to 2
I suspect, as Daniel mentioned, that I may need to tightly couple the view. However, I'm hoping there's a way around it without sacrificing separation.