.NET TIPS

［Silverlight 2］HTML要素のstyle属性のCSSプロパティを取得／設定するには？［C#、VB］

デジタルアドバンテージ　一色 政彦
2009/10/08

　Silverlightでは、基になるWebページのHTML DOM（Document Object Model：Webブラウザが提供するオブジェクト指向のプログラミング・インターフェイスで、HTMLドキュメントを構造的に表現し、それを操作できるようにする）にアクセスして、任意のHTML要素（＝DOMオブジェクト）が持つ任意の属性（Attribute）に値を設定したり、そこから値を取得したりできる。その手法について、「TIPS：［Silverlight 2］HTML要素の属性を設定／取得するには？」で説明したが、Silverlightではstyle属性（＝CSSプロパティによるスタイル指定）を取得／設定するためのメソッドが用意されている。本稿ではそのメソッドについて説明する。

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

ここの高さが変更されます
HTML要素のstyle属性を設定するサンプル

■任意のHTML要素が持つstyle属性のCSSプロパティを取得／設定する方法

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

<table id="targetID" style="height: 50px; width: 400px;">
<tr><td>ここの高さが変更されます</td><tr/>
</table>
属性を書き換える対象となるHTML要素のHTMLコード例

　ここでは、この<table>要素のstyle属性のheightプロパティを取得／設定する。

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

　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がある。

　先ほど示したGetStyleAttributeメソッドは、引数としてCSSプロパティ名を（文字列で）受け取り、戻り値としてそのCSSプロパティの値を（文字列で）返す。

　またSetStyleAttributeメソッドは、第1引数としてCSSプロパティ名を、第2引数としてそのCSSプロパティの値を（いずれも文字列で）受け取る。戻り値はない。

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

private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlElement htmlTextBox =
    HtmlPage.Document.GetElementById("targetID");

  string textValue = htmlTextBox.GetStyleAttribute("height");
  textBlockInfo.Text = textValue + "から100pxに変更しました";

  htmlTextBox.SetStyleAttribute("height", "100px");
}
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.GetStyleAttribute("height")
  textBlockInfo.Text = textValue & "から100pxに変更しました"

  htmlTextBox.SetStyleAttribute("height", "100px")

End Sub
HTML要素のstyle属性のCSSプロパティを設定／取得するサンプル・コード（上：C#、下：VB）

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

　なお、GetStyleAttributeメソッド／SetStyleAttributeメソッドで扱えるのはHTML要素のsytyle属性だけである。例えば、外部ファイル化している.cssファイル内のCSSプロパティを取得することはできない。つまりGetStyleAttributeメソッド／SetStyleAttributeメソッドでは、HTML要素（＝DOMオブジェクト）に実際に適用されているスタイル（＝CSSプロパティ）を取得することはできない。

　実際に適用されているスタイル（＝CSSプロパティ）を取得するには、JavaScriptであればjQueryのようなライブラリを使う必要がある（もしくはJavaScriptのcurrentStyleプロパティやgetComputedStyleメソッドを駆使して自分で実装することもできる）。しかしSilverlightでは、jQueryで提供されているようなスタイル取得の手段は提供されていない（筆者が探した限りでは見つからなかった）。End of Article

カテゴリ：Silverlight 2　処理対象：HTML DOM
使用ライブラリ：HtmlElementクラス（System.Windows.Browser名前空間）
使用ライブラリ：HtmlDocumentクラス（System.Windows.Browser名前空間）
関連TIPS：［Silverlight 2］HTML要素の属性を設定／取得するには？

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

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH