HTML要素の操作
テキストボックスに文字を入力したりボタンをクリックするなど、HTML要素を操作する方法について説明します。
HTML要素を指定する方法については要素の指定を参照してください。
クリック
ボタン／ラジオボタン／チェックボックス／リンク等をクリックする方法です。
InternetExplorer操作時
操作したいHTML要素を指定してClickメソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ボタンをクリック
objIE.Document.getElementById("buttonid1").Click()
'ラジオボタンの２つ目をクリック
objIE.Document.GetElementsByName("radioname")(1).Click()
'チェックボックスをクリック
objIE.Document.getElementsByName("checkname")(0).Click()
objIE.Document.Forms[0].Item("checkname").Click();
'リンクをクリック
For i As Integer = 0 To objIE.Document.Links.Length - 1
If objIE.Document.Links(i).InnerTEXT = "リンク１" Then
objIE.Document.Links(i).Click()
Exit For
End If
Next
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//ボタンをクリック
objIE.Document.getElementById("buttonid1").Click();
//ラジオボタンの２つ目をクリック
objIE.Document.GetElementsByName("radioname")(1).Click();
//チェックボックスをクリック
objIE.Document.getElementsByName("checkname")(0).Click();
//リンクをクリック
for (int i = 0; i < objIE.Document.Links.Length; i++)
{
if (objIE.Document.Links[i].InnerTEXT == "リンク１")
{
objIE.Document.Links[i].Click();
break;
}
}
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ボタンをクリック
objIE.document.getElementById("buttonid1").Click
'ラジオボタンの２つ目をクリック
objIE.document.getElementsByName("radioname")(1).Click
'チェックボックスをクリック
objIE.document.getElementsByName("checkname")(0).Click
'リンクをクリック
Dim i As Integer
For i = 0 To objIE.document.Links.Length - 1
If objIE.document.Links(i).innerText = "リンク１" Then
objIE.document.Links(i).Click
Exit For
End If
Next
WebBrowserコントロール使用時
操作したいHTML要素を指定してInvokeMember("Click")メソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。
※WebBrowserコントロールでは、HTML要素に対してClickメソッドを直接実行することができませんので、HtmlElementのInvokeMemberメソッドに対して"Click"を渡してやることで、クリックの実行が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ボタンをクリック
WebBrowser1.Document.GetElementById("buttonid1").InvokeMember("Click")
'ラジオボタンの２つ目をクリック
WebBrowser1.Document.All.GetElementsByName("radioname")(1).InvokeMember("Click")
'チェックボックスをクリック
WebBrowser1.Document.All.GetElementsByName("checkname")(0).InvokeMember("Click")
'リンクをクリック
For i As Integer = 0 To WebBrowser1.Document.Links.Count - 1
If WebBrowser1.Document.Links(i).GetAttribute("innerText") = "リンク１" Then
WebBrowser1.Document.Links(i).InvokeMember("click")
Exit For
End If
Next
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//ボタンをクリック
webBrowser1.Document.GetElementById("buttonid1").InvokeMember("Click");
//ラジオボタンの２つ目をクリック
webBrowser1.Document.All.GetElementsByName("radioname")[1].InvokeMember("Click");
//チェックボックスをクリック
webBrowser1.Document.All.GetElementsByName("checkname")[0].InvokeMember("Click");
//リンクをクリック
for (int i = 0; i < webBrowser1.Document.Links.Count; i++)
{
if (webBrowser1.Document.Links[i].GetAttribute("innerText") == "リンク１")
{
webBrowser1.Document.Links[i].InvokeMember("click");
break;
}
}
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ボタンをクリック
WebBrowser1.document.getElementById("buttonid1").Click
'ラジオボタンの２つ目をクリック
WebBrowser1.document.getElementsByName("radioname")(1).Click
'チェックボックスをクリック
WebBrowser1.document.getElementsByName("checkname")(0).Click
'リンクをクリック
Dim i As Integer
For i = 0 To WebBrowser1.document.Links.Length - 1
If WebBrowser1.document.Links(i).getAttribute("innerText") = "リンク１" Then
WebBrowser1.document.Links(i).Click
Exit For
End If
Next
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
操作したいHTML要素を指定してClickメソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で。
'メソッドには「Async」をつけてください。
'ボタンをクリック
Await WebView2.ExecuteScriptAsync("document.getElementById('buttonid1').click();")
'ラジオボタンの２つ目をクリック
Await WebView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].click();")
'チェックボックスをクリック
Await WebView2.ExecuteScriptAsync("document.getElementsByName('checkname')[0].click();")
'リンクをクリック
Dim js As New System.Text.StringBuilder()
js.AppendLine("for (let i = 0; i < document.links.length; i++)")
js.AppendLine("{")
js.AppendLine(" if(document.links[i].innerText == 'リンク１')")
js.AppendLine(" {")
js.AppendLine(" document.links[i].click();")
js.AppendLine(" break;")
js.AppendLine(" }")
js.AppendLine("}")
Await WebView2.ExecuteScriptAsync(js.ToString())
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で。
//メソッドには「async」をつけてください。
//ボタンをクリック
await webView2.ExecuteScriptAsync("document.getElementById('buttonid1').click();");
//ラジオボタンの２つ目をクリック
await webView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].click();");
//チェックボックスをクリック
await webView2.ExecuteScriptAsync("document.getElementsByName('checkname')[0].click();");
//リンクをクリック
System.Text.StringBuilder js = new System.Text.StringBuilder();
js.AppendLine("for (let i = 0; i < document.links.length; i++)");
js.AppendLine("{");
js.AppendLine(" if(document.links[i].innerText == 'リンク１')");
js.AppendLine(" {");
js.AppendLine(" document.links[i].click();");
js.AppendLine(" break;");
js.AppendLine(" }");
js.AppendLine("}");
await webView2.ExecuteScriptAsync(js.ToString());
選択
ラジオボタン／セレクトボックスを選択する方法です。
InternetExplorer操作時
ラジオボタン／チェックボックスの場合、操作したいHTML要素を指定してCheckedプロパティにTrue／Falseを設定します。
セレクトボックスの場合は２通りの方法があります。
操作したいセレクトボックスの要素を指定し、SelectedIndexプロパティに選択したいOptionの配列番号(0～)を設定します。
または、セレクトボックス用の中のOption要素を指定して、SelectedプロパティにTrue／Falseを設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ラジオボタンの２つ目を選択
objIE.Document.Forms("testform1").Item("radioname")(1).Checked = True
'セレクトボックスの中の３番目のオプションを選択
objIE.Document.Forms(0).Item("selectname").Item(2).Selected = True
objIE.Document.Forms(0).Item("selectname").SelectedIndex = 2
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//ラジオボタンの２つ目を選択
objIE.Document.Forms("testform1").Item("radioname")[1].Checked = true;
//セレクトボックスの中の３番目のオプションを選択
objIE.Document.Forms[0].Item["selectname"].Item[2].Selected = true;
objIE.Document.Forms[0].Item["selectname"].SelectedIndex = 2;
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ラジオボタンの２つ目を選択
objIE.document.forms("testform1").Item("radioname")(1).Checked = True
'セレクトボックスの中の３番目のオプションを選択
objIE.document.forms(0).Item("selectname").Item(2).Selected = True
objIE.document.forms(0).Item("selectname").selectedIndex = 2
WebBrowserコントロール使用時
後述するSetAttributeメソッドを使って属性に値を設定します。
ラジオボタン／チェックボックスの場合、Checked属性に"True"または"空文字"を設定します。（空文字がFalseの意味合いになります。）
セレクトボックスの場合、SelectedIndex属性やSelected属性に設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ラジオボタンの２つ目を選択
WebBrowser1.Document.All.GetElementsByName("radioname")(1).SetAttribute("Checked", "True")
WebBrowser1.Document.All.GetElementsByName("radioname")(1).SetAttribute("Checked", "") '解除は空文字
'セレクトボックスの中の３番目のオプションを選択
WebBrowser1.Document.Forms(0).All("selectname").All(2).SetAttribute("Selected", "True")
WebBrowser1.Document.All("selectname").SetAttribute("SelectedIndex", "2")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//ラジオボタンの２つ目を選択
webBrowser1.Document.All.GetElementsByName("radioname")[1].SetAttribute("Checked", "True");
webBrowser1.Document.All.GetElementsByName("radioname")[1].SetAttribute("Checked", ""); //解除は空文字
//セレクトボックスの中の３番目のオプションを選択
webBrowser1.Document.Forms[0].All["selectname"].All[2].SetAttribute("Selected", "True");
webBrowser1.Document.All["selectname"].SetAttribute("SelectedIndex", "2");
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'ラジオボタンの２つ目を選択
WebBrowser1.document.getElementsByName("radioname").Item(1).Checked = True
WebBrowser1.document.getElementsByName("radioname").Item(1).Checked = False
'セレクトボックスの中の３番目のオプションを選択
WebBrowser1.document.forms(0).all("selectname").all(2).Selected = True
WebBrowser1.document.all("selectname").selectedIndex = 2
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
ラジオボタン／チェックボックスの場合、操作したいHTML要素を指定してCheckedプロパティにTrue／Falseを設定します。
セレクトボックスの場合は２通りの方法があります。
操作したいセレクトボックスの要素を指定し、SelectedIndexプロパティに選択したいOptionの配列番号(0～)を設定します。
または、セレクトボックス用の中のOption要素を指定して、SelectedプロパティにTrue／Falseを設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'ラジオボタンの２つ目を選択
Await WebView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].checked = true;")
'セレクトボックスの中の３番目のオプションを選択
Await WebView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'].options[2].selected = true;")
Await WebView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'].selectedIndex = 2;")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//ラジオボタンの２つ目を選択
await webView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].checked = true;");
//セレクトボックスの中の３番目のオプションを選択
await webView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'].options[2].selected = true;");
await webView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'].selectedIndex = 2;");
入力
テキストボックスやパスワード欄に文字を入力する方法です。
InternetExplorer操作時
操作したいHTML要素を指定してValueプロパティに値を設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスに文字を入力
objIE.Document.getElementById("inputid2").Value = "テキスト２"
'パスワードに文字を入力
objIE.Document.getElementsByName("passwordname")(0).Value = "password"
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//テキストボックスに文字を入力
objIE.Document.getElementById("inputid2").Value = "テキスト２";
//パスワードに文字を入力
objIE.Document.getElementsByName("passwordname")[0].Value = "password";
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスに文字を入力
objIE.document.getElementById("inputid2").Value = "テキスト２"
'パスワードに文字を入力
objIE.document.getElementsByName("passwordname")(0).Value = "password"
WebBrowserコントロール使用時
操作したいHTML要素を指定してinnerTextプロパティに値を設定します。
またはSetAttributeメソッドを使って、Value属性に値を設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスに文字を入力
WebBrowser1.Document.GetElementById("inputid2").InnerText = "テキスト２"
'パスワードに文字を入力
WebBrowser1.Document.All.GetElementsByName("passwordname")(0).InnerText = "password"
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//テキストボックスに文字を入力
webBrowser1.Document.GetElementById("inputid2").InnerText = "テキスト２";
//パスワードに文字を入力
webBrowser1.Document.All.GetElementsByName("passwordname")[0].InnerText = "password";
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスに文字を入力
WebBrowser1.document.getElementById("inputid2").innerText = "テキスト２"
'パスワードに文字を入力
WebBrowser1.document.getElementsByName("passwordname")(0).innerText = "password"
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
操作したいHTML要素を指定してValueプロパティに値を設定します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'テキストボックスに文字を入力
Await WebView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２';")
'パスワードに文字を入力
Await WebView2.ExecuteScriptAsync("document.getElementsByName('passwordname')[0].value = 'password';")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//テキストボックスに文字を入力
await webView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２';");
//パスワードに文字を入力
await webView2.ExecuteScriptAsync("document.getElementsByName('passwordname')[0].value = 'password';");
参照
テキストボックスに入力されている値やチェックボックスの選択状態などの、HTML要素に設定されている値を参照する方法です。
InternetExplorer操作時
HTML要素を指定してValueプロパティの値を参照します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスを参照
MsgBox(objIE.Document.getElementById("inputid2").Value)
'ラジオボタンを参照
MsgBox((objIE.Document.Forms("testform1").Item("radioname")(1).Checked).ToString())
'チェックボックスを参照
MsgBox((objIE.Document.getElementsByName("checkname")(0).Checked).ToString())
'セレクトボックスを参照
MsgBox((objIE.Document.Forms(0).Item("selectname").Item(2).Selected).ToString())
MsgBox((objIE.Document.Forms(0).Item("selectname").SelectedIndex).ToString())
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//テキストボックスを参照
MessageBox.Show(objIE.Document.getElementById("inputid2").Value);
//ラジオボタンを参照
MessageBox.Show((objIE.Document.Forms("testform1").Item("radioname")[1].Checked).ToString());
//チェックボックスを参照
MessageBox.Show((objIE.Document.getElementsByName("checkname")(0).Checked).ToString());
//セレクトボックスを参照
MessageBox.Show((objIE.Document.Forms[0].Item["selectname"].Item[2].Selected).ToString());
MessageBox.Show((objIE.Document.Forms[0].Item["selectname"].SelectedIndex).ToString());
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスを参照
MsgBox (objIE.document.getElementById("inputid2").Value)
'ラジオボタンを参照
MsgBox ((objIE.document.forms("testform1").Item("radioname")(1).Checked))
'チェックボックスを参照
MsgBox ((objIE.document.getElementsByName("checkname")(0).Checked))
'セレクトボックスを参照
MsgBox ((objIE.document.forms(0).Item("selectname").Item(2).Selected))
MsgBox ((objIE.document.forms(0).Item("selectname").selectedIndex))
WebBrowserコントロール使用時
HTML要素を指定し、GetAttributeメソッドでValue属性の値を参照します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスを参照
MessageBox.Show(WebBrowser1.Document.GetElementById("inputid2").GetAttribute("value"))
'ラジオボタンを参照
MsgBox(WebBrowser1.Document.All.GetElementsByName("radioname")(1).GetAttribute("Checked"))
'チェックボックスを参照
MsgBox(WebBrowser1.Document.All.GetElementsByName("checkname")(0).GetAttribute("Checked"))
'セレクトボックスを参照
MsgBox(WebBrowser1.Document.All.GetElementsByName("selectname")(0).All(2).GetAttribute("Selected"))
MsgBox(WebBrowser1.Document.All.GetElementsByName("selectname")(0).GetAttribute("SelectedIndex"))
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//テキストボックスを参照
MessageBox.Show(webBrowser1.Document.GetElementById("inputid2").GetAttribute("value"));
//ラジオボタンを参照
MessageBox.Show(webBrowser1.Document.All.GetElementsByName("radioname")[1].GetAttribute("Checked"));
//チェックボックスを参照
MessageBox.Show(webBrowser1.Document.All.GetElementsByName("checkname")[0].GetAttribute("Checked"));
//セレクトボックスを参照
MessageBox.Show(webBrowser1.Document.All.GetElementsByName("selectname")[0].All[2].GetAttribute("Selected"));
MessageBox.Show(webBrowser1.Document.All.GetElementsByName("selectname")[0].GetAttribute("SelectedIndex"));
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'テキストボックスを参照
MsgBox (WebBrowser1.document.getElementById("inputid2").getAttribute("value"))
'ラジオボタンを参照
MsgBox (WebBrowser1.document.getElementsByName("radioname")(1).getAttribute("Checked"))
'チェックボックスを参照
MsgBox (WebBrowser1.document.getElementsByName("checkname")(0).getAttribute("Checked"))
'セレクトボックスを参照
MsgBox (WebBrowser1.document.getElementsByName("selectname")(0).all(2).getAttribute("Selected"))
MsgBox (WebBrowser1.document.getElementsByName("selectname")(0).getAttribute("SelectedIndex"))
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
HTML要素を指定してValueプロパティの値を参照します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'C#・VB側で値を受け取る方法については「https//web.biz-prog.net/readme/webview_new3.html#jstocs」を参照。
'テキストボックスを参照
Await WebView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);")
'ラジオボタンを参照
Await WebView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());")
'チェックボックスを参照
Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('checkname')[0].checked.toString());")
'セレクトボックスを参照
Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].options[2].selected.toString());")
Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].selectedIndex.toString());")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//C#・VB側で値を受け取る方法については「https://web.biz-prog.net/readme/webview_new3.html#jstocs」を参照。
//テキストボックスを参照
await webView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);");
//ラジオボタンを参照
await webView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());");
//チェックボックスを参照
await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('checkname')[0].checked.toString());");
//セレクトボックスを参照
await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].options[2].selected.toString());");
await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].selectedIndex.toString());");
Reset／Submit
formに対してreset／submitを行う方法です。
InternetExplorer操作時
指定したフォーム要素のReset／Submitメソッドを実行します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'Reset
objIE.Document.Forms("testform1").Reset()
'Submit
objIE.Document.Forms("testform1").Submit()
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//Reset
objIE.Document.Forms("testform1").Reset();
//Submit
objIE.Document.Forms("testform1").Submit();
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'Reset
objIE.document.forms("testform1").Reset
'Submit
objIE.document.forms("testform1").submit
WebBrowserコントロール使用時
form要素のInvokeMemberメソッドを使用してSubmit／Resetを実行します。
InvokeMember("メソッド名")
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'Reset
WebBrowser1.Document.Forms("testform1").InvokeMember("reset")
'Submit
WebBrowser1.Document.Forms("testform1").InvokeMember("submit")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//Reset
webBrowser1.Document.Forms["testform1"].InvokeMember("reset");
//Submit
webBrowser1.Document.Forms["testform1"].InvokeMember("submit");
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'Reset
WebBrowser1.document.forms("testform1").Reset
'Submit
WebBrowser1.document.forms("testform1").submit
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
Submit／Resetメソッドを使用します。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'Reset
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.forms['testform1'].reset();")
'Submit
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.forms['testform1'].submit();")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//Reset
await webView2.CoreWebView2.ExecuteScriptAsync("document.forms['testform1'].reset();");
//Submit
await webView2.CoreWebView2.ExecuteScriptAsync("document.forms['testform1'].submit();");
属性の参照・設定
要素の属性の値を参照・設定する方法です。
InternetExplorer操作時
属性の値の取得はgetAttributeメソッドを使用します。
getAttribute("属性の名前")
戻り値：文字
※引数は、大文字と小文字が区別されません。
属性に設定するにはsetAttributeメソッドを使用します。戻り値：文字
※引数は、大文字と小文字が区別されません。
setAttribute("設定する属性名","この属性の新しい値")
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'info属性の値を表示
MsgBox(objIE.Document.getElementById("styleid1").getAttribute("info"))
'info属性に値を設定
objIE.Document.getElementById("styleid1").setAttribute("info", "newinfo")
MsgBox(objIE.Document.getElementById("styleid1").getAttribute("info"))
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//info属性の値を表示
MessageBox.Show(objIE.Document.getElementById("styleid1").getAttribute("info"));
//info属性に値を設定
objIE.Document.getElementById("styleid1").setAttribute("info", "newinfo");
MessageBox.Show(objIE.Document.getElementById("styleid1").getAttribute("info"));
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'info属性の値を表示
MsgBox (objIE.document.getElementById("styleid1").getAttribute("info"))
'info属性に値を設定
Call objIE.document.getElementById("styleid1").setAttribute("info", "newinfo")
MsgBox (objIE.document.getElementById("styleid1").getAttribute("info"))
WebBrowserコントロール使用時
getAttrbute/setAttributeメソッドで参照・設定が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'info属性の値を表示
MsgBox(WebBrowser1.Document.GetElementById("styleid1").GetAttribute("info"))
'info属性に値を設定
WebBrowser1.Document.GetElementById("styleid1").SetAttribute("info", "newinfo")
MsgBox(WebBrowser1.Document.GetElementById("styleid1").GetAttribute("info"))
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//info属性の値を表示
MessageBox.Show(webBrowser1.Document.GetElementById("styleid1").GetAttribute("info"));
//info属性に値を設定
webBrowser1.Document.GetElementById("styleid1").SetAttribute("info", "newinfo");
MessageBox.Show(webBrowser1.Document.GetElementById("styleid1").GetAttribute("info"));
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'info属性の値を表示
MsgBox (WebBrowser1.document.getElementById("styleid1").getAttribute("info"))
'info属性に値を設定
Call WebBrowser1.document.getElementById("styleid1").setAttribute("info", "newinfo")
MsgBox (WebBrowser1.document.getElementById("styleid1").getAttribute("info"))
参考
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
getAttrbute/setAttributeメソッドで参照・設定が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'info属性の値を表示
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));")
'文字のスタイル内容を表示
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('info', 'newinfo');")
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//info属性の値を表示
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");
//文字のスタイル内容を表示
await webView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('info', 'newinfo');");
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");
参考
スタイルの参照・設定
指定した要素のスタイルを設定・参照する方法です。
InternetExplorer操作時
HtmlElement.Styleプロパティに、さらにスタイルを指定することで、スタイルの設定と参照が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'背景色を変更
objIE.Document.body.Style.backgroundColor = "Red"
'スタイルの文字色を表示
MessageBox.Show(objIE.Document.getElementById("styleid1").Style.Color)
'スタイルの文字色を変更
objIE.Document.getElementById("styleid1").Style.Color = "Red"
'スタイルの文字フォントを変更
objIE.Document.getElementById("styleid1").Style.fontstyle = "italic"
'スタイルの文字サイズを変更
objIE.Document.getElementById("styleid1").Style.fontsize = "xx-large"
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//背景色を変更
objIE.Document.body.Style.backgroundColor = "Red";
//スタイルの文字色を表示
MessageBox.Show(objIE.Document.getElementById("styleid1").Style.Color);
//スタイルの文字色を変更
objIE.Document.getElementById("styleid1").Style.Color = "Red";
//スタイルの文字フォントを変更
objIE.Document.getElementById("styleid1").Style.fontstyle = "italic";
//スタイルの文字サイズを変更
objIE.Document.getElementById("styleid1").Style.fontsize = "xx-large";
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'背景色を変更
objIE.document.body.Style.backgroundColor = "Red"
'スタイルの文字色を表示
MsgBox (objIE.document.getElementById("styleid1").Style.Color)
'スタイルの文字色を変更
objIE.document.getElementById("styleid1").Style.Color = "Red"
'スタイルの文字フォントを変更
objIE.document.getElementById("styleid1").Style.FontStyle = "italic"
'スタイルの文字サイズを変更
objIE.document.getElementById("styleid1").Style.FontSize = "xx-large"
WebBrowserコントロール使用時
Styleプロパティで文字で参照・設定が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'文字のスタイル内容を表示
MessageBox.Show(WebBrowser1.Document.GetElementById("styleid1").Style)
'文字のスタイルを変更
WebBrowser1.Document.GetElementById("styleid1").Style = "font-size: xx-large; font-style: italic; color: red;"
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//文字のスタイル内容を表示
MessageBox.Show(webBrowser1.Document.GetElementById("styleid1").Style);
//文字のスタイルを変更
webBrowser1.Document.GetElementById("styleid1").Style = "font-size: xx-large; font-style: italic; color: red;";
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'背景色を変更
WebBrowser1.document.body.Style.backgroundColor = "Red"
'スタイルの文字色を表示
MsgBox(WebBrowser1.document.getElementById("styleid1").Style.Color)
'スタイルの文字色を変更
WebBrowser1.document.getElementById("styleid1").Style.Color = "Red"
'スタイルの文字フォントを変更
WebBrowser1.document.getElementById("styleid1").Style.fontstyle = "italic"
'スタイルの文字サイズを変更
WebBrowser1.document.getElementById("styleid1").Style.fontsize = "xx-large"
参考
WebView2コントロール使用時
WebView2コントロールのDOM操作はJavaScriptを使います。
StyleプロパティやgetAttrbute/setAttributeメソッドで参照・設定が行えます。
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
'メソッドには「Async」をつけてください。
'背景色を変更
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.body.Style.backgroundColor = 'Red';")
'文字のスタイル内容を表示
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('style'));")
'文字のスタイルを変更
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';")
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
'文字のスタイルを変更２
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');")
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
'文字のスタイルを変更３
Await WebView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.color ='black';")
Await WebView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.color);")
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//背景色を変更
await webView2.CoreWebView2.ExecuteScriptAsync("document.body.Style.backgroundColor = 'Red';");
//文字のスタイル内容を表示
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('style'));");
//文字のスタイルを変更
await webView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';");
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
//文字のスタイルを変更２
await webView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');");
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
//文字のスタイルを変更３
await webView2.CoreWebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.color ='black';");
await webView2.CoreWebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.color);");