.NET TIPS ［Silverlight 2］HTML要素の属性を設定／取得するには？［C#、VB］ デジタルアドバンテージ　一色 政彦 2009/09/03

　Silverlightでは、SilverlightコントロールをホストしているページのHTML DOM（Document Object Model）にアクセスして、さまざまな操作が行える。例えば、任意のHTML要素が持つ任意の属性（Attribute）に値を設定したり、そこから取得したりできる。

　次のサンプルでは、Silverlightアプリケーション上のボタンをクリックすると、HTMLのテーブル要素（＝<table>要素）のheight属性の値（＝高さ）を取得して、その値をTextBlockコントロールに表示し、そして「100」という値をheight属性に設定し直す。

ここの高さが変更されます

HTML要素の属性を設定するサンプル

■任意のHTML要素が持つ任意の属性を取得／設定する方法

　本稿では例として、次のようなHTML要素をあらかじめHTMLページ内に記述しているものとする。

<table id="targetID" height="50" width="400" bgcolor="#ff6666"> <tr><td>ここの高さが変更されます</td></tr> </table>

属性を書き換える対象となるHTML要素のHTMLコード例

　ここでは、この<table>要素のheight属性を取得／設定する。

　これには、HTML要素を表すHtmlElementクラス（System.Windows.Browser名前空間）のオブジェクトのGetAttributeメソッド／SetAttributeメソッドを呼び出す。

　HtmlElementオブジェクトを取得するには、ブラウザに表示されているHTMLドキュメントを表すHtmlDocumentクラス（System.Windows.Browser名前空間）のオブジェクトのGetElementByIdメソッドを呼び出せばよい。GetElementByIdメソッドは、引数としてHTML要素のid値（＝id属性の値。この例では「targetID」）を（文字列で）受け取り、戻り値として該当HTML要素を表すHtmlElementオブジェクトを返す。

　この際に必要となるHtmlDocumentオブジェクトは、次のプロパティから取得できる。

HtmlPage.Document

　このように、ブラウザのHTML DOMにアクセスするためのHtmlPageクラス（System.Windows.Browser名前空間）には、HTMLドキュメント（＝HtmlDocumentオブジェクト）を取得するための静的プロパティDocumentがある。

　先ほど示したGetAttributeメソッドは、引数として要素名を（文字列で）受け取り、戻り値としてその要素の値を（文字列で）返す。

　またSetAttributeメソッドは、第1引数として要素名を、第2引数としてその要素の値を（いずれも文字列で）受け取る。戻り値はない。

　次のコードは、GetAttributeメソッド／SetAttributeメソッドを利用する例だ。「textBlockInfo」はTextBlockコントロールを参照している。

private void Button_Click(object sender, RoutedEventArgs e) {   HtmlElement htmlTextBox =     HtmlPage.Document.GetElementById("targetID");   string textValue = htmlTextBox.GetAttribute("height");   textBlockInfo.Text = textValue + "pxから100pxに変更しました";   htmlTextBox.SetAttribute("height", "100"); } Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)   Dim htmlTextBox As HtmlElement = _     HtmlPage.Document.GetElementById("targetID")   Dim textValue As String = htmlTextBox.GetAttribute("height")   textBlockInfo.Text = textValue & "pxから100pxに変更しました"   htmlTextBox.SetAttribute("height", "100") End Sub

HTML要素の属性を設定／取得するサンプル・コード（上：C#、下：VB）

　このコードを実行すると、冒頭のサンプル・アプリケーションと同じ実行結果になる。

　なお、例えばHTMLのテキストボックス要素（＝type属性に「text」が設定された<input>要素）のvalue属性の値を設定した場合、IEではテキストボックスの表示内容がその値に変更されるが、Firefoxなどのそのほかのブラウザでは（value属性の値が設定されても）表示内容は変わらない（※これらのブラウザでは、value属性の値はテキストボックス要素が表示されるときの初期値としてしか扱われないようだ）。このように、ブラウザ間で挙動が異なる場合もあるので注意してほしい。

　IE以外のブラウザでテキストボックスの表示内容を変更したい場合は、JavaScriptのvalueプロパティを使うなどすればよい。この方法を採用する場合は、「TIPS：［Silverlight 2］HTMLページ内のJavaScriptコードを実行するには？」を参考にしてほしい。

カテゴリ：Silverlight 2　処理対象：HTML DOM 使用ライブラリ：HtmlElementクラス（System.Windows.Browser名前空間） 使用ライブラリ：HtmlDocumentクラス（System.Windows.Browser名前空間） 関連TIPS：［Silverlight 2］HTMLページ内のJavaScriptコードを実行するには？

この記事と関連性の高い別の.NET TIPS ［Silverlight 2］HTML要素の属性を追加／削除するには？ ［Silverlight 2］HTML要素のstyle属性のCSSプロパティを取得／設定するには？ ［Silverlight 2］HTML要素にフォーカスを設定するには？ ［Silverlight 2］HTML要素のDOMプロパティを取得／設定するには？ ［Silverlight 2］HTML要素のDOMメソッドを呼び出すには？ ［Silverlight 2］HTML要素クリック時にSilverlightのメソッドを実行するには？ ［Silverlight 2］文字列として作成したJavaScriptコードを実行するには？ WebBrowserコントロール内のテキストボックスに文字列をセットするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）