style.textShadowは、要素のスタイル属性のtext-shadowプロパティの値を取得、もしくは、設定するプロパティ。
text-shadowプロパティは、テキストに影を加えることができる。
構文
取得
var $textShadow = $elementReference.style.textShadow;
戻り値
要素のスタイル属性のtext-shadowプロパティの値。
設定
初期設定値は「none」。
影あり
$elementReference.style.textShadow = "h-shadow v-shadow blur color";
- h-shadow
- 必須。
- 水平方向の影の位置。
- 「px」や「pt」を付けた数値で指定。
- 負数を指定することもできる。
- v-shadow
- 必須。
- 垂直方向の影の位置。
- 「px」や「pt」を付けた数値で指定。
- 負数を指定することもできる。
- blur
- 省略可。
- ぼかし具合。
- 「px」や「pt」を付けた数値で指定。
- color
- 省略可。
- 影の色。
- 下記の何れかの方法で指定する。
- カラーネーム：赤であれば
red。 - RGBカラーモデル：下記のような形式で指定できる。
- #RGB：赤であれば
#f00。 - #RRGGBB：赤であれば
#ff0000。 - rgb( 0～255, 0～255, 0～255 )：赤であれば
rgb( 255, 0, 0 )。 - rgb( 割合, 割合, 割合 )：赤であれば
rgb( 100%, 0%, 0% )。
- #RGB：赤であれば
- カラーネーム：赤であれば
影なし
影を表示しない。
$elementReference.style.textShadow = "none";
継承
親要素の設定を継承。
$elementReference.style.textShadow = "inherit";
サンプル
サンプルのtext-shadowプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「text-shadowプロパティ」の値に設定する。設定値を「サンプルのtext-shadowプロパティの値：」の右横に表示する。「Sample Element / サンプル要素 」のテキストに、指定した影を加える。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setTextShadow( $textShadow ) {
var $element = document.getElementById( "sample" );
$element.style.textShadow = $textShadow;
var $textShadow = $element.style.textShadow;
document.getElementById( "sampleOutput" ).innerHTML = $textShadow;
}
</script>
function setTextShadow( $textShadow ) {
var $element = document.getElementById( "sample" );
$element.style.textShadow = $textShadow;
var $textShadow = $element.style.textShadow;
document.getElementById( "sampleOutput" ).innerHTML = $textShadow;
}
</script>
HTML
<button onclick="setTextShadow('none');">none</button>
<br />
<button onclick="setTextShadow('0px 0px 1px #ff0000');">0px 0px 1px #ff0000</button>
<button onclick="setTextShadow('0px 0px 2px #ff0000');">0px 0px 2px #ff0000</button>
<button onclick="setTextShadow('0px 0px 5px #ff0000');">0px 0px 5px #ff0000</button>
<br />
<button onclick="setTextShadow('0px 1px 2px #ff0000');">0px 1px 2px #ff0000</button>
<button onclick="setTextShadow('0px 2px 2px #ff0000');">0px 2px 2px #ff0000</button>
<button onclick="setTextShadow('0px 3px 2px #ff0000');">0px 3px 2px #ff0000</button>
<br />
<button onclick="setTextShadow('1px 1px 2px #ff0000');">1px 1px 2px #ff0000</button>
<button onclick="setTextShadow('2px 2px 2px #ff0000');">2px 2px 2px #ff0000</button>
<button onclick="setTextShadow('3px 3px 2px #ff0000');">3px 3px 2px #ff0000</button>
<br />
<button onclick="setTextShadow('5px 5px 2px red, 5px -5px 2px blue, -5px 5px 2px pink, -5px -5px 2px green');">5px 5px 2px red, 5px -5px 2px blue, -5px 5px 2px pink, -5px -5px 2px green</button>
<br />
<button onclick="setTextShadow('5px 5px 2px #aa0000, 5px -5px 2px #ff0000, -5px 5px 2px #ff5555, -5px -5px 2px #ffaaaa');">5px 5px 2px #aa0000, 5px -5px 2px #ff0000, -5px 5px 2px #ff5555, -5px -5px 2px #ffaaaa</button>
<br />
<button onclick="setTextShadow('inherit');">inherit</button>
<br />
<p>サンプルのtext-shadowプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 20px; font-size: 20px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<br />
<button onclick="setTextShadow('0px 0px 1px #ff0000');">0px 0px 1px #ff0000</button>
<button onclick="setTextShadow('0px 0px 2px #ff0000');">0px 0px 2px #ff0000</button>
<button onclick="setTextShadow('0px 0px 5px #ff0000');">0px 0px 5px #ff0000</button>
<br />
<button onclick="setTextShadow('0px 1px 2px #ff0000');">0px 1px 2px #ff0000</button>
<button onclick="setTextShadow('0px 2px 2px #ff0000');">0px 2px 2px #ff0000</button>
<button onclick="setTextShadow('0px 3px 2px #ff0000');">0px 3px 2px #ff0000</button>
<br />
<button onclick="setTextShadow('1px 1px 2px #ff0000');">1px 1px 2px #ff0000</button>
<button onclick="setTextShadow('2px 2px 2px #ff0000');">2px 2px 2px #ff0000</button>
<button onclick="setTextShadow('3px 3px 2px #ff0000');">3px 3px 2px #ff0000</button>
<br />
<button onclick="setTextShadow('5px 5px 2px red, 5px -5px 2px blue, -5px 5px 2px pink, -5px -5px 2px green');">5px 5px 2px red, 5px -5px 2px blue, -5px 5px 2px pink, -5px -5px 2px green</button>
<br />
<button onclick="setTextShadow('5px 5px 2px #aa0000, 5px -5px 2px #ff0000, -5px 5px 2px #ff5555, -5px -5px 2px #ffaaaa');">5px 5px 2px #aa0000, 5px -5px 2px #ff0000, -5px 5px 2px #ff5555, -5px -5px 2px #ffaaaa</button>
<br />
<button onclick="setTextShadow('inherit');">inherit</button>
<br />
<p>サンプルのtext-shadowプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 20px; font-size: 20px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>