style

styleで、CSS、スタイルシートを変えます。

color

id名.style.color="色"idは、HTMLで指定しておきます。

<span id="cs">abc</span>
<button onclick="cs.style.color='#ff8866'">change</button>
abc

以下、CSSと同じように指定できます

backgroundColor 背景の色を変えます
fontSize 文字の大きさを変えます
fontWeight 文字の太さを変えます
fontFamily 文字のフォントを変えます
textDecoration 線を引きます
textIndent 字下げします
textAlign 横位置です
lineHeight 行の高さ

borderStyle 枠のスタイル
borderColor 枠の色
borderWidth 枠の太さ
border 省略して、まとめて変えられます

margin 枠の外の大きさ
padding 枠の中の大きさ

backgroundImage

背景のイメージを変えます。
document.all.id名.style.backgroundImage="url(ファイル名)"

あらかじめ、このdivに id="check2" としておきます。

<p><button onClick='document.all.check2.style.backgroundImage = "url(image/mini_02.jpg)";'>change</button></p>

backgroundRepeat ="no-repeat | repeat-y | repeat-y"
backgroundAttachment="fixed(スクロールしない) | scroll(スクロールする)"
backgroundRepeat="repeat(全体) | repeat-x(横のみ) | repeat-y(縦のみ) | no-repeat(1つだけ)"
backgroundPosition="center | left | right | 長さ | % 及び top | bottom | 長さ| %"

bodyに、 id="check" としておきます。

<p><button onClick='with(document.all.check.style){backgroundImage = "url(image/earth_1.png)"; backgroundPosition = "50% 16px"; backgroundRepeat="no-repeat"; backgroundAttachment="fixed"; }'>change</button></p>

Next : 次のステップへ
Pre  : 前のステップへ
 Up  : JavaScriptに戻る
Home : ホームに戻る

Presented by Rei

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル