style.textShadowプロパティ

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% )

影なし

影を表示しない。

$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>

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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク