mshtml.HTMLDocument how to hide a dynamically created div with class attribute

Question

I am trying to load a load a Webpage in C# WebBrowser control (WPF not WinForm). Along with other content the page has a image rotator that Dynamically creates two divs having same class to utilize the image rotating. In the LoadComplete event of the WebBrowser control I am attaching a style sheet to hide the two divs. The two divs created dynamically onload of the page is follow :

<div class="backgroundImageDivsClass" style="
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px; 
    left: 0px;
    padding: 0px;
    margin: 0px;
    z-index: -9999;
    opacity: 1;
    background-image: url("data/767/Course/9214/1000000001_474030834.jpg"); 
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
"></div>
<div class="backgroundImageDivsClass"></div>

And the way css is assigned inside LoadComplete event of the webbrowser control is :

mshtml.IHTMLStyleSheet styleSheet = Document.createStyleSheet(string.Empty, 0);
styleSheet.cssText = @".backgroundImageDivsClass{display:none;}";

But this seems not working as its not hiding the divs. Anybody please give me some idea what I am missing.

score 3 · Answer 1 · answered Jan 16 '15 at 08:37

This is the method I used based on your descriptions and it's working fine.

   public MainForm()
   {
        InitializeComponent();

        webBrowser.DocumentCompleted += webBrowser_DocumentCompleted;
        var text = @"<html>
                        <body>
                            <div class=""backgroundImageDivsClass"">
                               <span> hello everyone!</span>
                            </div>
                        </body>
                     </html>";

        webBrowser.DocumentText = text;
    }

    void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        var doc = webBrowser.Document.DomDocument as IHTMLDocument2;
        var styleSheet = doc.createStyleSheet(string.Empty, 0);

        var ruleIndex = styleSheet.addRule(".backgroundImageDivsClass", "display:none", 0);//index can be used to remove the rule

        //styleSheet.cssText = @".backgroundImageDivsClass{display:none;}";
    }

System.Windows.Controls.WebBrowser.Document doesn't have a DomDocument — marifrahman, Jan 20 '15 at 01:45
However, I tried the addRule instead of cssText with No luck. — marifrahman, Jan 20 '15 at 01:59

FlemGrem · Answer 2 · 2015-01-20T10:53:46.457

2

styleSheet.cssText = @".backgroundImageDivsClass{display:none !important;}";

Is my suggestion. It will force override anything else trying to set the display property. (Like the image rotator control) because any !important tags are applied last by the DOM

To aide further if this doesn't work..

Use the firebug plugin in Firefox, to determine what CSS attributes are applied to your Div dynamically.

You can edit the firebug rendered CSS in real time, until you find a solution that works, then incorporate it in your solution.

This article, augments my suggestions well: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

edited Jan 20 '15 at 10:53

answered Jan 16 '15 at 14:12

FlemGrem

814
4
9

Tried that with no luck. – marifrahman Jan 20 '15 at 01:29
On firebug I did applied the css rules once the document is loaded and it seems working fine in there. – marifrahman Jan 20 '15 at 01:58
Ive edited my post there was a typo, there were asterisks around important, ive removed them, try it that again buddy. – FlemGrem Jan 20 '15 at 10:55
Yep- I know it was type and I din actually included those ** - result is no luck. – marifrahman Jan 21 '15 at 04:33
Ok, cool. ...Just another hunch.... the LoadCompleted Event would intimate that the document has fully loaded. Do you think this event is too late in the cycle to be adding styles? maybe try the Navigated event handler instead? – FlemGrem Jan 21 '15 at 10:47
As I mentioned the div is created dynamically- once the entire document is loaded- why then try at Navigated event ?! – marifrahman Jan 21 '15 at 22:51

score 1 · Answer 3 · edited May 23 '17 at 10:09

1

I believe the problem is that you use the createStyleSheet method on the Document and not on the Document.DomDocument. The answer here can be a useful reference.

Also, as you can read here createStyleSheet is no longer supported. Starting with Internet Explorer 11 you should use document.createElement('style')

edited May 23 '17 at 10:09

Community

1
1

answered Jan 19 '15 at 20:27

Roumelis George

6,602
2
16
31

System.Windows.Controls.WebBrowser.Document doesn't have a DomDocument – marifrahman Jan 20 '15 at 01:46

mshtml.HTMLDocument how to hide a dynamically created div with class attribute

3 Answers3