スタイルに設定された余白(margin, padding)を操作する

スタイルに設定された枠線(margin, padding)を操作する


obj = IE.document.getElementByIdなどでオブジェクトを取得
obj.style.margin = “10px” //※10pxのmargin
obj.style.padding = “15px” //※15pxのpadding
obj.style.marginLeft = “35px” //※35pxの左margin

スタイルに設定された余白(margin, padding)を操作する

スタイルを設定する」で解説しているように、各オブジェクトのスタイルを取り扱うことができます。
その中で、ここでは、余白(margin, padding)を見てみましょう。

なおmarginもpaddingも余白をあける働きをしますが、指し示す領域はお互い下記のように異なります。

borderスタイルの外側か内側かという点が大きな違いです。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0018/")
REPEAT
 SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

obj = IE.document.getElementsByTagName("h4")
FOR A = 0 TO (obj.length - 1)
 obj.item(A).style.borderWidth = "5px"
 MSGBOX("Set margin")
 obj.item(A).style.margin = "20px"
 MSGBOX("Set padding")
 obj.item(A).style.padding = "20px"
NEXT

解説

上のスクリプトの解説をします。
スクリプトを実行するとアクセスするページには、h4タグが配置されています。
このスクリプトはタグをオブジェクトとして取得し、
margin、paddingに新しい数値をセットしています。
なお、marginとpaddingの適用が分かりやすい様に、枠線の太さを5pxに広げ、余白設定時にメッセージを入れております。

なおmargin/padding = “10px”とすると上下左右の全方位に余白が適用されますので、どこか1面だけに当てたい場合は、サンプルや下記のようにして下さい

この投稿の続きを読む »

タグ

2013年5月1日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

スタイルに設定された枠線(border)を操作する

スタイルに設定された枠線(border)を操作する


obj = IE.document.getElementByIdなどでオブジェクトを取得
obj.style.borderColor = “red” //※例 赤に設定
obj.style.borderWidth = “30px” //※例 30pxに設定
obj.style.borderStyle = “dotted” //※例 ドットに設定

スタイルに設定された枠線(border)を操作する

スタイルを設定する」で解説しているように、各オブジェクトのスタイルを取り扱うことができます。
その中で、ここでは、枠線(border)を見てみましょう。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0018/")
REPEAT
 SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

obj = IE.document.getElementsByTagName("h4")
FOR A = 0 TO (obj.length - 1)
 PRINT obj.item(A).style.borderColor
 PRINT obj.item(A).style.borderStyle
 PRINT obj.item(A).style.borderWidth
NEXT

解説

上のスクリプトの解説をします。
スクリプトを実行するとアクセスするページには、h4タグが配置されており、
枠線のデザインが指定されています。
このスクリプトはタグをオブジェクトとして取得し、
枠線のスタイルを出力しています。
その他のプロパティについては、CSSのリファレンス一覧などを参照してみてください。

もちろん、値は取得するだけでなく、任意に設定も可能です。
値を設定するスクリプトはこのようになります。

この投稿の続きを読む »

タグ

2013年4月15日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

スタイルに設定された背景(background)を操作する

スタイルに設定された背景(background)を操作する


obj = IE.document.getElementByIdなどでオブジェクトを取得
obj.style.backgroundColor = “red” //※例 フォントをredに設定
obj.style.backgroundImage = “url(‘/img.gif’)//※例 画像を設定

スタイルに設定された背景(background)を操作する

スタイルを設定する」で解説しているように、各オブジェクトのスタイルを取り扱うことができます。
その中で、ここでは、背景(background)を見てみましょう。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0017/")
REPEAT
 SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

obj = IE.document.getElementsByTagName("q")
FOR A = 0 TO (obj.length - 1)
 PRINT obj.item(A).style.backgroundImage
NEXT

解説

上のスクリプトの解説をします。
スクリプトを実行するとアクセスするページには、blockquoteタグ、qタグが配置されており、
おのおの、background-color、background-imageが指定されています。
このスクリプトはqタグをオブジェクトとして取得し、
qの背景画像(background-image)をそれぞれ出力しています。
その他のプロパティについては、CSSのリファレンス一覧などを参照してみてください。

もちろん、値は取得するだけでなく、任意に設定も可能です。
値を設定するスクリプトはこのようになります。

この投稿の続きを読む »

タグ

2013年4月5日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

タグ内のタグにアクセスする

タグ内のタグにアクセスする


obj = IE.document.getElementByIdなどでオブジェクトを取得
obj= obj.getElementsByTagName

タグの中にあるタグの情報にアクセスする

HTMLのタグは、タグの中にタグを記述することができます。例えば以下のような構造だとします。[Webページはこちら]

<div id="MainText">
 <p>Hello Boys</p>
 <p>And how's going Girls</p>
 <p>My name is Andy. Nice to meet you.</p>
</div>

上記はタグの中にタグがある「入れ子」という構造になっています。getElementsByTagNameでpを取得することもできますが、
まずはdiv(MainText)から取得して、その子であるpを取得する手法を説明します。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0016/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

obj  = IE.document.getElementByID("MainText")
objP = obj.getElementsByTagName("p")

FOR A = 0 TO (objP.length - 1)
  PRINT (A+1) + "番目のp:" + objP.item(A).innerText
NEXT

親子のタグが複数ある場合でも大丈夫

最初から親のタグとその中にある子タグが分かっている場合は、範囲を限定しながら取得することができます

先ほどのサンプルでは、アクセスしたページの最初のdiv要素しか取得していません。
全てのdivタグの中にあるpを取得するプログラムは下記のようになります。

この投稿の続きを読む »

タグ

2013年2月24日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

スタイルを設定する

スタイルを設定する


obj = IE.document.getElementByIdなどでオブジェクトを取得
obj.style.color = “red” //※例 フォントをredに設定

スタイルを設定する

取得したオブジェクトのstyle属性に値をセットすることでスタイルを変えることができます

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0013/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

h4Tag = IE.document.getElementsByTagName("h4")
FOR A = 0 TO (h4Tag.length - 1)
 h4Tag.item(A).style.color = "red"
NEXT

スタイルに設定できる種類の数

例えば、枠線を設定したい場合はstyle.border = “1px black solid”と記述します。
フォントサイズでしたら、style.fontSize = “80px”とします。
もし、CSS(Cascading Style Sheet)をご存知でしたら、この辺りの設定と表示の関連性が想像できるかと思います。
CSSのリファレンス一覧などを参照に、任意の設定を試してみてください。

以下のサンプルでは、いろいろなスタイルを設定し、視覚的に変化したことがわかるようになっています。
スクリプトはこのようになります。

この投稿の続きを読む »

タグ

2013年2月19日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

GETOLEITEMを使わずitemで指定して要素を操作する

GETOLEITEMを使わずitemで指定して要素を操作する


obj = IE.document.getElementsByTagName(タグ名)
obj.item(N)

itemで要素を指定する

以下の様な構造のWebページにあるh4の要素を取得する場合、
GETOLEITEMを使わず、itemで番号を指定する方法も利用可能です。

<h1>Hello H1</h1>
<div id="mainCentric">
<h4>Yes! This is a pen.</h4>
<h4>No! No! No! This is not a pencil.</h4>
<p>Get some objects!</p>
<p>Then you go home!</p>
</div>

lengthで要素の数を取得できますので、itemで1つ1つ番号を指定することができます

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0013/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

h4Tag = IE.document.getElementsByTagName("h4")
FOR A = 0 TO (h4Tag.length - 1)
 PRINT h4Tag.item(A).innerText
NEXT

指定した要素はinnerText、innerHTMLどちらも使えますし、値の変更も可能です。

下記のスクリプトで、要素を取得して視覚的に分かりやすくログ出力した上で
取得後の要素を書き換えています。
以下のような書き方になります。

この投稿の続きを読む »

タグ

2013年2月14日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

指定したタグの中を変更する

指定したタグの中を変更する


obj = IE.document.getElementsByTagName(タグ)
obj.innerText = 新しいテキスト
obj.innerHTML = 新しいHTML

指定したタグの中を変更する

同じく以下の様な構造のWebページがあります。

<h1>Hello H1</h1>
<div id="mainCentric">
<h4>Yes! This is a pen.</h4>
<h4>No! No! No! This is not a pencil.</h4>
<p>Get some objects!</p>
<p>Then you go home!</p>
</div>

getElementsByTagNameで指定したタグを取得し、中を変更します。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0013/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

h4Tag = IE.document.getElementsByTagName("h4")
FOR A = 0 TO (GETOLEITEM(h4Tag)-1)
 ALL_OLE_ITEM[A].innerText = "書き換えました。"
NEXT

innerHTMLで新たなタグを挿入

innerHTMLにタグを指定した文字列をセットすることも可能です。
スクリプトは以下のようになります。

この投稿の続きを読む »

タグ

2013年2月9日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

指定したidの中を変更する

指定したidの中を変更する


obj = IE.document.getElementById(ID名)
obj.innerText = 新しいテキスト
obj.innerHTML = 新しいHTML

指定したidの中を変更する

例えば以下の様な構造のWebページがあったとします。idを指定されたいくつかのタグで構成されています。

<p id="res1">The Capital is in Tokyo</p>
<p id="res2">Gold is just a Gold</p>
<p id="res3">You are fine!</p>
<ul id="fruit">
 <li>Banana</li>
 <li>Fig</li>
 <li>Apple</li>
</ul>
<ul id="fruit">
 <li>Kaki</li>
 <li>Lemon</li>
 <li>Cherry</li>
</ul>

getElementByIdでIDを指定することで該当のオブジェクトを取得できますので、そのオブジェクトのinnerTextやinnerHTMLに値をセットすることでIDの中を変更できます。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0014/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

objId = IE.document.getElementById("res2")
objId.innerText = "お金はただのお金です"
PRINT "res2:日本語に変更します"
objId = IE.document.getElementById("res3")
objId.innerHTML = "<font color=red><strong><em>" + objId.innerText + "</em></strong></font>"
PRINT "res3:装飾します"

同名IDが複数ある場合は

上記のWebページではid=”fruit”と指定されている箇所が複数あります。
この場合にgetElementById(“fruit”)で指定したオブジェクトを変更するとどうなるでしょうか
スクリプトは以下のようになります。

この投稿の続きを読む »

タグ

2013年2月4日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

指定したidの中を取得する

指定したidの中を取得する


obj = IE.document.getElementById(ID名)
obj.innerText
obj.innerHTML

指定したidの中を取得する

例えば以下の様な構造のWebページがあったとします。idを指定されたいくつかのタグで構成されています。

<p id="res1">The Capital is in Tokyo</p>
<p id="res2">Gold is just a Gold</p>
<p id="res3">You are fine!</p>
<ul id="fruit">
 <li>Banana</li>
 <li>Fig</li>
 <li>Apple</li>
</ul>
<ul id="fruit">
 <li>Kaki</li>
 <li>Lemon</li>
 <li>Cherry</li>
</ul>

getElementByIdでIDを指定することで該当のオブジェクトを取得できますので、それに対してinnerTextやinnerHTMLを実行することでIDの中が取得できます。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0014/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

objId = IE.document.getElementById("res1")
PRINT "res1:" + objId.innerText
objId = IE.document.getElementById("res2")
PRINT "res2:" + objId.innerText
objId = IE.document.getElementById("res3")
PRINT "res3:" + objId.innerText

同名IDが複数ある場合は

上記のWebページではid=”fruit”と指定されている箇所が複数あります。
idは1ページに内に1つ(一意)であることが望ましいため、理想的な状況ではありませんが、
この場合にgetElementById(“fruit”)を指定するとどうなるでしょうか。
スクリプトは以下のようになります。

ちなみにgetElementByIdは単数取得を前提としており、複数取得できるgetElementsByTagNameと異なり、複数形のsが無い点に注意です。

この投稿の続きを読む »

タグ

2013年1月30日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

指定したタグの中身を取得する

指定したタグの中身を取得する


obj = IE.document.getElementsByTagName(タグ名)
GETOLEITEM(obj)
ALL_OLE_ITEM[N].innertHTML
ALL_OLE_ITEM[N].innertText obj.length

指定したタグの中身を取得する

以下の様な構造のWebページがありますのでh4タグの中身を取得してみましょう

<h1>Hello H1</h1>
<div id="mainCentric">
<h4>Yes! This is a pen.</h4>
<h4>No! No! No! This is not a pencil.</h4>
<p>Get some objects!</p>
<p>Then you go home!</p>
</div>

HTMLで取得する場合はinnerHTML、中のテキストを取得する場合はInnerTextを使います。
getElementsByTagNameで取得したオブジェクトをGETOLEITEM関数に渡す処理を行います。

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.visible = True
IE.navigate("http://canal22.org/sample0013/")
REPEAT
  SLEEP(0.1)
UNTIL !IE.busy AND IE.readyState = 4

pTag = IE.document.getElementsByTagName("h4")

GETOLEITEM(pTag)
PRINT ALL_OLE_ITEM[0].innerText

GETOLEITEMを実行すると、取得したオブジェクトの中がALL_OLE_ITEMに移されますので、ALL_OLE_ITEMを操作します
上のスクリプトではALL_OLE_ITEMの1番目(=0)のオブジェクトのinnerTextを取得しています。

pタグの中身を取得する

次のスクリプトでは、pタグを取得し、全ての中身を書き出しています。
GETOLEITEMを実行することにより要素数を取得できますので、順番にinnertTextやinnertHTMLで取得していきます。
スクリプトは下記のようになります。(見て分かりやすい様にハイフン、改行を施しています)

この投稿の続きを読む »

タグ

2013年1月24日 | コメントは受け付けていません。 |

カテゴリー:UWSCとInternetExplorer

このページの先頭へ