方法 : マネージ HTML DOM (Document Object Model) の要素のスタイルを変更する

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

HTML のスタイルを使用してドキュメントの外観と要素を制御できます。HtmlDocument および HtmlElement は、次の形式のスタイル文字列を設定する Style プロパティをサポートします。

name1:value1;...;nameN:valueN;

これは、フォントを Arial に設定し、すべてのテキストを太字に設定するスタイル文字列を持つ DIV です。

Hello, world!

</DIV>

Style プロパティを使用してスタイルを操作する場合の問題点は、文字列への個々のスタイル設定の追加や削除が面倒なことです。たとえば、ユーザーがカーソルを DIV 上に配置するたびに直前のテキストを斜体で表示し、カーソルを DIV から離したときに斜体をオフにする手順は複雑になります。この方法で多数のスタイルを操作する必要がある場合には、時間が問題になります。

次のプロシージャには、HTML ドキュメントのスタイルと要素を簡単に操作するために使用できるコードが含まれています。このプロシージャを実行するには、新しいプロジェクトの作成やフォームへのコントロールの追加など、Windows フォームの基本的なタスクの実行方法を理解している必要があります。

Windows フォームアプリケーションのスタイル変更を処理するには

新しい Windows フォームプロジェクトを作成します。
新しいクラスファイルを作成します。ファイル名の最後に、プログラミング言語に適した拡張子を付けてください。
このトピックの「例」にある StyleGenerator クラスコードをクラスファイルにコピーし、コードを保存します。

次の HTML を Test.htm という名前のファイルに保存します。

<HTML>
    <BODY>

        <DIV style="font-face:arial;font-weight:bold;">
            Hello, world!
        </DIV><P>

        <DIV>
            Hello again, world!
        </DIV><P>

    </BODY>
</HTML>

webBrowser1 という名前の WebBrowser コントロールをプロジェクトのメインフォームに追加します。

プロジェクトのコードファイルに次のコードを追加します。

重要 :
webBrowser1_DocumentCompleted イベントハンドラが DocumentCompleted イベントのリスナとして構成されていることを確認します。Visual Studio で、WebBrowser コントロールをダブルクリックします。次に、テキストエディタで、リスナをプログラムで構成します。

<System.Security.Permissions.PermissionSet(Security.Permissions.SecurityAction.Demand, Name:="FullTrust")> _
Public Class Form1

    Dim SG As StyleGenerator = Nothing
    Dim Elem As HtmlElement = Nothing
    Dim WithEvents DocumentEvents As HtmlDocument

    Private Sub WebBrowser1_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
        SG = New StyleGenerator()
        DocumentEvents = WebBrowser1.Document
    End Sub

    Private Sub Document_MouseOver(ByVal sender As Object, ByVal e As HtmlElementEventArgs) Handles DocumentEvents.MouseOver
        Elem = WebBrowser1.Document.GetElementFromPoint(e.MousePosition)
        If Elem.TagName.Equals("DIV") Then
            SG.ParseStyleString(Elem.Style)
            SG.SetStyle("font-style", "italic")
            Elem.Style = SG.GetStyleString()
        End If
    End Sub

    Private Sub Document_MouseLeave(ByVal sender As Object, ByVal e As HtmlElementEventArgs) Handles DocumentEvents.MouseLeave
        If (Elem IsNot Nothing) Then
            SG.RemoveStyle("font-style")
            Elem.Style = SG.GetStyleString()
            ' Reset, since we may mouse over a new DIV element next time.
            SG.Clear()
        End If
    End Sub
End Class

StyleGenerator sg = null;
HtmlElement elem = null;

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    sg = new StyleGenerator();

    webBrowser1.Document.MouseOver += new HtmlElementEventHandler(Document_MouseOver);
    webBrowser1.Document.MouseLeave += new HtmlElementEventHandler(Document_MouseLeave);
}

void Document_MouseOver(object sender, HtmlElementEventArgs e)
{
    elem = webBrowser1.Document.GetElementFromPoint(e.MousePosition);
    if (elem.TagName.Equals("DIV"))
    {
        sg.ParseStyleString(elem.Style);
        sg.SetStyle("font-style", "italic");
        elem.Style = sg.GetStyleString();
    }
}

void Document_MouseLeave(object sender, HtmlElementEventArgs e)
{
    if (elem != null)
    {
        sg.RemoveStyle("font-style");
        elem.Style = sg.GetStyleString();
        // Reset, since we may mouse over a new DIV element next time.
        sg.Clear();
    }
}

プロジェクトを実行します。カーソルを最初の DIV 上に移動して、コードの効果を確認します。

使用例

StyleGenerator クラスの完全なコードを次のコード例に示します。このコードは、既存のスタイル値を解析し、スタイルの追加、変更、および削除をサポートし、変更要求に対応した新しいスタイル値を返します。

Imports System
Imports System.Collections.Generic
Imports System.Text

Public Class StyleGenerator
    Dim styleDB As Dictionary(Of String, String)

    Public Sub New()
        styleDB = New Dictionary(Of String, String)()
    End Sub


    Public Function ContainsStyle(ByVal name As String) As Boolean
        Return styleDB.ContainsKey(name)
    End Function


    Public Function SetStyle(ByVal name As String, ByVal value As String) As String
        Dim oldValue As String = ""

        If (Not name.Length > 0) Then
            Throw New ArgumentException("Parameter name cannot be zero-length.")
        End If
        If (Not value.Length > 0) Then
            Throw New ArgumentException("Parameter value cannot be zero-length.")
        End If

        If (styleDB.ContainsKey(name)) Then
            oldValue = styleDB(name)
        End If

        styleDB(name) = value

        Return oldValue
    End Function

    Public Function GetStyle(ByVal name As String) As String
        If (Not name.Length > 0) Then
            Throw New ArgumentException("Parameter name cannot be zero-length.")
        End If

        If (styleDB.ContainsKey(name)) Then
            Return styleDB(name)
        Else
            Return ""
        End If
    End Function

    Public Sub RemoveStyle(ByVal name As String)
        If (styleDB.ContainsKey(name)) Then
            styleDB.Remove(name)
        End If
    End Sub

    Public Function GetStyleString() As String
        If (styleDB.Count > 0) Then
            Dim styleString As New StringBuilder("")
            Dim key As String
            For Each key In styleDB.Keys
                styleString.Append(String.Format("{0}:{1};", CType(key, Object), CType(styleDB(key), Object)))
            Next key

            Return styleString.ToString()
        Else
            Return ""
        End If
    End Function

    Public Sub ParseStyleString(ByVal styles As String)
        If (styles.Length) > 0 Then
            Dim stylePairs As String() = styles.Split(New Char() {";"c})
            Dim stylePair As String
            For Each stylePair In stylePairs
                If (stylePairs.Length > 0) Then
                    Dim styleNameValue As String() = stylePair.Split(New Char() {":"c})
                    If (styleNameValue.Length = 2) Then
                        styleDB(styleNameValue(0)) = styleNameValue(1)
                    End If
                End If
            Next stylePair
        End If
    End Sub


    Public Sub Clear()
        styleDB.Clear()
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Text;

namespace ManagedDOMStyles
{
    public class StyleGenerator
    {
        private Dictionary<string, string> styleDB;

        public StyleGenerator()
        {
            styleDB = new Dictionary<string, string>();
        }

        public bool ContainsStyle(string name)
        {
            return(styleDB.ContainsKey(name));
        }

        public string SetStyle(string name, string value)
        {
            string oldValue = "";

            if (!(name.Length > 0))
            {
                throw (new ArgumentException("Parameter name cannot be zero-length."));
            }
            if (!(value.Length > 0))
            {
                throw (new ArgumentException("Parameter value cannot be zero-length."));
            }

            if (styleDB.ContainsKey(name))
            {
                oldValue = styleDB[name];
            }

            styleDB[name] = value;

            return (oldValue);
        }

        public string GetStyle(string name)
        {
            if (!(name.Length > 0))
            {
                throw (new ArgumentException("Parameter name cannot be zero-length."));
            }

            if (styleDB.ContainsKey(name))
            {
                return (styleDB[name]);
            }
            else
            {
                return ("");
            }
        }

        public void RemoveStyle(string name)
        {
            if (styleDB.ContainsKey(name))
            {
                styleDB.Remove(name);
            }
        }

        public string GetStyleString()
        {
            if (styleDB.Count > 0)
            {
                StringBuilder styleString = new StringBuilder("");
                foreach (string key in styleDB.Keys)
                {
                    styleString.Append(String.Format("{0}:{1};", (object)key, (object)styleDB[key]));
                }

                return (styleString.ToString());
            }
            else
            {
                return ("");
            }
        }

        public void ParseStyleString(string styles)
        {
            if (styles.Length > 0)
            {
                string[] stylePairs = styles.Split(new char[] { ';' });
                foreach(string stylePair in stylePairs)
                {
                    if (stylePairs.Length > 0)
                    {
                        string[] styleNameValue = stylePair.Split(new char[] { ':' });
                        if (styleNameValue.Length == 2)
                        {
                            styleDB[styleNameValue[0]] = styleNameValue[1];
                        }
                    }
                }
            }
        }

        public void Clear()
        {
            styleDB.Clear();
        }
    }
}

参照

HtmlElement

次の方法で共有

方法 : マネージ HTML DOM (Document Object Model) の要素のスタイルを変更する

Windows フォームアプリケーションのスタイル変更を処理するには

使用例

参照

参照

その他のリソース

次の方法で共有

方法 : マネージ HTML DOM (Document Object Model) の要素のスタイルを変更する

Windows フォーム アプリケーションのスタイル変更を処理するには

使用例

参照

参照

その他のリソース

Windows フォームアプリケーションのスタイル変更を処理するには