Question

I have been looking with no success to see if I can dynamically apply a css style to JSF component or div using javascript. Is this possible.

This is pseudo code

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

And the function would return something like “position:relative;left:25px;”

I’ve had no luck and maybe it can’t be done but would like a second opinion.

Edit:

---

I’m trying to see if I can keep a separation / reduce the coupling between the presentation/view and the model/controller. This is for indenting commenting or product reviews (to nest replies to comments or reviews). The most I really want to track is an integer on how deep a reply is. First level = 0 second level = 1, and so on. So a comment or product review would be 0 deep, a reply to the comment or review would be 1 and so on.

Then in the EL I wanted to call a javascript function and do something like

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

And then then say for a third level comment (a reply to a reply) it would look like this:

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

where

#{myBean.value}

evaluates to 2

I suspect like Daniel says I’ll have to tightly couple the view but I’d rather not have to. I’d think there has to be a way. But maybe not.

Answer 1

I decided to skip the javascript approach and settled on a simpler and I think cleaner method to create the dynamic css classes for my situation. I already capture/calculate the depth value for each comment when it is entered. So I am just returning that value in EL and concatenating it to a ‘base name’ for the css class like so:

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

“indent_” is the base name for the css class. So for a 0 level comment it will have a class="indent_0". A reply to that comment will have class="indent_1".

I use the ternary so that if there are lot of replies under a given comment it doesn’t indent right off the right hand side of the page. Even though you can keep going deeper, it will only indent up to 5 levels.

For my case at the moment, this is a simpler and cleaner method of adding some dynamically generated css class names. Right now I have to define 6 classes for this in the css file, but perhaps I’ll figure out how to nest the boxes but it isn’t a priority this works just fine for me for now.