スタイルに設定された枠線(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.navigate("http://canal22.org/sample0018/") |
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" |
obj.item(A).style.margin = "20px" |
obj.item(A).style.padding = "20px" |
解説
上のスクリプトの解説をします。
スクリプトを実行するとアクセスするページには、h4タグが配置されています。
このスクリプトはタグをオブジェクトとして取得し、
margin、paddingに新しい数値をセットしています。
なお、marginとpaddingの適用が分かりやすい様に、枠線の太さを5pxに広げ、余白設定時にメッセージを入れております。
なおmargin/padding = “10px”とすると上下左右の全方位に余白が適用されますので、どこか1面だけに当てたい場合は、サンプルや下記のようにして下さい
IE = CREATEOLEOBJ("InternetExplorer.Application") |
IE.navigate("http://canal22.org/sample0018/") |
UNTIL !IE.busy AND IE.readyState = 4 |
obj = IE.document.getElementsByTagName("h4") |
FOR A = 0 TO (obj.length - 1) |
obj.item(A).style.marginTop = "50px" |
obj.item(A).style.marginBottom = "10px" |
obj.item(A).style.marginRight = "15px" |
obj.item(A).style.marginLeft = "20px" |
obj.item(A).style.paddingTop = "25px" |
obj.item(A).style.paddingBottom = "30px" |
obj.item(A).style.paddingRight = "35px" |
obj.item(A).style.paddingLeft = "40px" |
余白のスタイルが変更されました。
