スタイルに設定された余白(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.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

このページの先頭へ