style.cursorは、要素のスタイル属性のcursorプロパティの値を取得、もしくは、設定するプロパティ。
cursorプロパティは、カーソルの形を指定することができる。
構文
取得
var $cursor = $elementReference.style.cursor;
戻り値
要素のスタイル属性のcursorプロパティの値。
設定
$elementReference.style.cursor = "value";
- value
- カーソルの形を指定。
- 下記の何れかの値を指定する。初期設定値は「auto」。
- auto：自動。コンテキスト（文脈）に応じたブラウザの既定のカーソル。
- default：プラットフォームの既定のカーソル。ほとんどの場合、矢印。
- crosshair：十字線。
- pointer：リンク用カーソル。
- move：移動用カーソル。
- help：ヘルプ用カーソル。ほとんどの場合、疑問符「？」やバルーン。
- text：テキスト用カーソル。ほとんどの場合、縦棒。
- wait：処理中であることを示すカーソル。砂時計や時計などが多い。
- n-resize：上リサイズ用カーソル。
- e-resize：右リサイズ用カーソル。
- s-resize：下リサイズ用カーソル。
- w-resize：左リサイズ用カーソル。
- ne-resize：右上リサイズ用カーソル。
- se-resize：右下リサイズ用カーソル。
- sw-resize：左下リサイズ用カーソル。
- nw-resize：左上リサイズ用カーソル。
- uri：カーソル用画像。
- 構文：
url(画像Url) - 注意：
$elementReference.style.cursor = 'url(画像Url), auto'のように、画像以外も指定しておく必要がある。
- 構文：
サンプル
サンプル要素
サンプル要素の変更後のcursorプロパティの値：
サンプルの動作について
- 「画像」ボタン以外の各ボタンをクリックすると、ボタン名のテキストを、サンプル要素のcursorプロパティの値に設定し、設定値を「サンプル要素の変更後のcursorプロパティの値：」の右横に表示する。
- 「画像」ボタンをクリックすると、サンプル要素上でのカーソルを、ひまわりの花の画像にする。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setCursor( $cursor ) {
var $element = document.getElementById( "sample" );
$element.style.cursor = $cursor;
var $cursor = $element.style.cursor;
document.getElementById( "sampleOutput" ).innerHTML = $cursor;
}
</script>
function setCursor( $cursor ) {
var $element = document.getElementById( "sample" );
$element.style.cursor = $cursor;
var $cursor = $element.style.cursor;
document.getElementById( "sampleOutput" ).innerHTML = $cursor;
}
</script>
HTML
<div id="sample" style="margin: 20px; width: 500px; height: 200px; border: 1px solid red; background-color: yellow;">
サンプル要素
</div>
<button onclick="setCursor('auto');">auto</button>
<button onclick="setCursor('default');">default</button>
<button onclick="setCursor('crosshair');">crosshair</button>
<button onclick="setCursor('pointer');">pointer</button>
<button onclick="setCursor('move');">move</button>
<button onclick="setCursor('help');">help</button>
<button onclick="setCursor('text');">text</button>
<button onclick="setCursor('wait');">wait</button>
<button onclick="setCursor('n-resize');">n-resize</button>
<button onclick="setCursor('e-resize');">e-resize</button>
<button onclick="setCursor('s-resize');">s-resize</button>
<button onclick="setCursor('w-resize');">w-resize</button>
<button onclick="setCursor('ne-resize');">ne-resize</button>
<button onclick="setCursor('se-resize');">se-resize</button>
<button onclick="setCursor('sw-resize');">sw-resize</button>
<button onclick="setCursor('nw-resize');">nw-resize</button>
<button onclick="setCursor('url(http://alphasis.info/wp-content/uploads/2013/10/cursor32x32-himawari.ico), auto');">画像</button>
<br />
<p>サンプル要素の変更後のcursorプロパティの値：<span id="sampleOutput"></span></p>
サンプル要素
</div>
<button onclick="setCursor('auto');">auto</button>
<button onclick="setCursor('default');">default</button>
<button onclick="setCursor('crosshair');">crosshair</button>
<button onclick="setCursor('pointer');">pointer</button>
<button onclick="setCursor('move');">move</button>
<button onclick="setCursor('help');">help</button>
<button onclick="setCursor('text');">text</button>
<button onclick="setCursor('wait');">wait</button>
<button onclick="setCursor('n-resize');">n-resize</button>
<button onclick="setCursor('e-resize');">e-resize</button>
<button onclick="setCursor('s-resize');">s-resize</button>
<button onclick="setCursor('w-resize');">w-resize</button>
<button onclick="setCursor('ne-resize');">ne-resize</button>
<button onclick="setCursor('se-resize');">se-resize</button>
<button onclick="setCursor('sw-resize');">sw-resize</button>
<button onclick="setCursor('nw-resize');">nw-resize</button>
<button onclick="setCursor('url(http://alphasis.info/wp-content/uploads/2013/10/cursor32x32-himawari.ico), auto');">画像</button>
<br />
<p>サンプル要素の変更後のcursorプロパティの値：<span id="sampleOutput"></span></p>