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樣式？

回答

相關問題