日本の情報発信基地

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

 
UWSC

スポンサーリンク

スタイルに設定された余白(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面だけに当てたい場合は、サンプルや下記のようにして下さい

 

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)
  MSGBOX("Top margin")
  obj.item(A).style.marginTop = "50px"
  MSGBOX("Bottom margin")
  obj.item(A).style.marginBottom = "10px"
  MSGBOX("Right margin")
  obj.item(A).style.marginRight = "15px"
  MSGBOX("Left margin")
  obj.item(A).style.marginLeft = "20px"
  MSGBOX("Top padding")
  obj.item(A).style.paddingTop = "25px"
  MSGBOX("Bottom padding")
  obj.item(A).style.paddingBottom = "30px"
  MSGBOX("Right padding")
  obj.item(A).style.paddingRight = "35px"
  MSGBOX("Left padding")
  obj.item(A).style.paddingLeft = "40px"
NEXT

余白のスタイルが変更されました。

スポンサーリンク

http://canal22.org/advance/ie/set-margin-paddin/

スポンサーリンク

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ヒカルの情報ブログ , 2018 All Rights Reserved.