如何:在托管 HTML 文档对象模型中更改元素的样式

可以使用 HTML 中的样式来控制文档及其元素的外观。 HtmlDocumentHtmlElement 支持 Style 属性,这些属性采用以下格式的样式字符串:

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

下面是一个带有样式字符串的 DIV,该样式字符串将字体设置为 Arial 并将所有文本设置为粗体:

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

使用 Style 属性操作样式的问题在于,在字符串中添加和删除单个样式设置可能很麻烦。 例如,若要在用户将光标置于 DIV 上时以斜体呈现以前的文本,并在光标离开 DIV 时取消斜体显示,这会是一个复杂的过程。 如果需要以这种方式操作大量样式,时间就会成为问题。

以下过程包含可用于轻松操作 HTML 文档和元素上的样式的代码。 此过程要求你知道如何在 Windows 窗体中执行基本任务,例如创建新项目和向窗体添加控件。

在 Windows 窗体应用程序中处理样式更改

  1. 创建新的 Windows 窗体项目。

  2. 创建一个以适合你的编程语言的扩展名结尾的新类文件。

  3. 将本主题示例部分中的 StyleGenerator 类代码复制到类文件中,并保存代码。

  4. 将以下 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>
    
  5. 将名为 webBrowser1WebBrowser 控件添加到项目的主窗体中。

  6. 将以下代码添加到项目的代码文件。

    重要

    确保将 webBrowser1_DocumentCompleted 事件处理程序配置为 DocumentCompleted 事件的侦听器。 在 Visual Studio 中,双击 WebBrowser 控件;在文本编辑器中,以编程方式配置侦听器。

    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();
        }
    }
    
    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
    
  7. 运行该项目。 将光标移到第一个 DIV 上,观察代码的效果。

示例

以下代码示例显示 StyleGenerator 类的完整代码,该类分析现有样式值,支持添加、更改和删除样式,并返回带有请求的更改的新样式值。

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();
        }
    }
}
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

另请参阅