style.cursorプロパティ

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>

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>

スポンサード リンク

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