Silverlight 2系列：与HTML DOM交互

在html页面中，

 <div id='errorLocation' style="font-size: small;color: Gray;"></div>
    <div id="div1">这里是第一个div，id为div1</div>
    <div id="div2">这里是第二个div，id为div2</div>//自己添加的部分
    <div id="silverlightControlHost"> 
   
  <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" Height="200px">
   <param name="source" value="ClientBin/SilverlightApplication6.xap"/>
   <param name="onerror" value="onSilverlightError" />
   <param name="background" value="white" />
   
   <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   </a>
  </object>
  <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>

在page页面中：

    <Canvas Background="#D5FCDF">
        <TextBlock Text="Silverlight Accessing the HTML DOM" Foreground="Red"
               Canvas.Top="10" Canvas.Left="30" FontSize="18">
    </TextBlock> 

        <TextBox x:Name="input" Text="请在这里输入"
                        Height="40" Width="300"
                        Canvas.Left="30" Canvas.Top="50"></TextBox>
 
        <TextBox x:Name="result" Text="这里显示结果"
                        Height="40" Width="300"
                        Canvas.Left="30" Canvas.Top="100">
        </TextBox>
        <Button x:Name="displayButton" Background="Red"
            Height="40" Width="100" Content="显 示"
            Canvas.Top="50" Canvas.Left="350"
            Click="displayButton_Click">
        </Button>
    </Canvas>

在page。cs页面中：

        private void displayButton_Click(object sender, RoutedEventArgs e)
        {
            HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

            this.result.Text = element.GetAttribute("innerText");//改变rusult的textbox的值，显示和input中一样。   

        }

（2）

        private void displayButton_Click(object sender, RoutedEventArgs e)
        {
            HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);
            element.SetAttribute("innerText", this.result.Text);    //    输入的input的text的值时div1，html中的div1的内容将会改变，变成div2的值。  

        }

（3）

        private void displayButton_Click(object sender, RoutedEventArgs e)
        {
            HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);//输入div1

            element.SetStyleAttribute("width", this.result.Text);
            element.SetStyleAttribute("height", this.result.Text);   //修改html页面中div1中的width，height 的属性

         }

注意：

一定要将html页面设置为启动页面才可以显示出效果。