Files
docs-desktop/dotnet-desktop-guide/framework/winforms/controls/how-to-change-styles-on-an-element-in-the-managed-html-document-object-model.md
T
Andy De George c0ba284473 Initial winforms content migrated (#18)
* Merge winforms framework content to working branch (#14)

* Breadcrumb / TOC / Move net5 to net folder (#15)

* change path from net5 to net

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Mess with bread/toc

* Add .net 5 winforms placeholder article (#16)

* added some metadata and adjusted net5 placeholder

* corrections

* corrections

* corrections

* Test1

* Swapping landing page vs concept

* fix links

* Fix links

* Fix desc
2020-09-01 16:26:21 -07:00

3.5 KiB

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid
title ms.date dev_langs helpviewer_keywords ms.assetid
How to: Change Styles on an Element in the Managed HTML Document Object Model 03/30/2017
csharp
vb
managed HTML DOM [Windows Forms], changing styles on elements
154e8d9f-3e2d-4e8b-a6f3-c85a070e9cc1

How to: Change Styles on an Element in the Managed HTML Document Object Model

You can use styles in HTML to control the appearance of a document and its elements. xref:System.Windows.Forms.HtmlDocument and xref:System.Windows.Forms.HtmlElement support xref:System.Windows.Forms.HtmlElement.Style%2A properties that take style strings of the following format:

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

Here is a DIV with a style string that sets the font to Arial and all text to bold:

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

The problem with manipulating styles using the xref:System.Windows.Forms.HtmlElement.Style%2A property is that it can prove cumbersome to add to and remove individual style settings from the string. For example, it would become a complex procedure for you to render the previous text in italics whenever the user positions the cursor over the DIV, and take italics off when the cursor leaves the DIV. Time would become an issue if you need to manipulate a large number of styles in this manner.

The following procedure contains code that you can use to easily manipulate styles on HTML documents and elements. The procedure requires that you know how to perform basic tasks in Windows Forms, such as creating a new project and adding a control to a form.

To process style changes in a Windows Forms application

  1. Create a new Windows Forms project.

  2. Create a new class file ending in the extension appropriate for your programming language.

  3. Copy the StyleGenerator class code in the Example section of this topic into the class file, and save the code.

  4. Save the following HTML to a file named 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. Add a xref:System.Windows.Forms.WebBrowser control named webBrowser1 to the main form of your project.

  6. Add the following code to your project's code file.

    Important

    Ensure that the webBrowser1_DocumentCompleted event handler is configured as a listener for the xref:System.Windows.Forms.WebBrowser.DocumentCompleted event. In Visual Studio, double-click on the xref:System.Windows.Forms.WebBrowser control; in a text editor, configure the listener programmatically.

    [!code-csharpManagedDOMStyles#2] [!code-vbManagedDOMStyles#2]

  7. Run the project. Run your cursor over the first DIV to observe the effects of the code.

Example

The following code example shows the full code for the StyleGenerator class, which parses an existing style value, supports adding, changing, and removing styles, and returns a new style value with the requested changes.

[!code-csharpManagedDOMStyles#1] [!code-vbManagedDOMStyles#1]

See also