Visualforce 開発者ガイド
j$Component を使用した JavaScript からのコンポーネントの参照
どの Visualforce タグにも id 属性が含まれています。他のタグでタグの id 属性を使用することにより、その 2 つのタグをバインドすることができます。たとえば、<apex:outputLabel> タグの for 属性を <apex:inputField> タグの id 属性と併用することができます。<apex:actionFunction>、<apex:actionSupport>、およびその他の活動指向型のコンポーネントの reRender 属性および status 属性もその他のコンポーネントの id 属性の値を使用します。
この ID は、複数の Visualforce コンポーネントのバインドに使用されるだけでなく、ページを表示する際のコンポーネントのドキュメントオブジェクトモデル (DOM) ID の一部の形成にも使用されます。
JavaScript または他の Web 対応言語で Visualforce コンポーネントを参照するには、そのコンポーネントの id 属性の値を指定する必要があります。DOM ID はコンポーネントの id 属性とその要素を含むすべてのコンポーネントの id 属性の組み合わせで構成されます。
コンポーネントアクセスの例
次の例では、<apex:outputPanel> タグの DOM ID を使用します。このページには 2 つのパネルがあります。最初のパネルには DOM イベントをトリガするチェックボックスがあり、2 番目のパネルにはイベントに応じて変わるいくつかのテキストが含まれています。
ページの上部には、<script> HTML タグ内に含まれる JavaScript があります。イベント (input) をトリガした要素および影響を受けるテキストを含む対象のパネルの DOM ID (textid) を引数としてとります。
1<apex:page id="thePage">
2 <!-- A simple function for changing the font. -->
3 <script>
4 function changeFont(input, textid) {
5 if(input.checked) {
6 document.getElementById(textid).style.fontWeight = "bold";
7 }
8 else {
9 document.getElementById(textid).style.fontWeight = "normal";
10 }
11 }
12 </script>
13
14 <!-- This outputPanel calls the function, passing in the
15 checkbox itself, and the DOM ID of the target component. -->
16 <apex:outputPanel layout="block">
17 <label for="checkbox">Click this box to change text font:</label>
18 <input id="checkbox" type="checkbox"
19 onclick="changeFont(this,'{!$Component.thePanel}');"/>
20 </apex:outputPanel>
21
22 <!-- This outputPanel is the target, and contains
23 text that will be changed. -->
24 <apex:outputPanel id="thePanel" layout="block">
25 Change my font weight!
26 </apex:outputPanel>
27</apex:page>{!$Component.thePanel} 式は、<apex:outputPanel id="thePanel"> コンポーネントによって生成される HTML 要素の DOM ID を取得するために使用されます。