Style cursor 属性

定義と使用方法

cursor 属性設定または返却する値は、マウス指標に表示する光標のタイプです。

も参照してください：

CSS 参考マニュアル：cursor 属性

例

例 1

光標を変更します：

document.getElementById("myP").style.cursor = "pointer";

自分で試してみてください

例 2

すべての利用可能な光標を表示します：

var whichSelected = x.selectedIndex;
document.body.style.cursor = x.options[whichSelected].text;

自分で試してみてください

例 3

光標のタイプを返します：

alert(document.getElementById("myP").style.cursor);

自分で試してみてください

文法

cursor 属性を返します：

object.style.cursor

cursor 属性を設定します：

object.style.cursor = value

属性値

値 説明
alias 何かを別名を作成するように指示するカーソル。
all-scroll 任意の方向にスクロールできることを示すカーソル。
auto デフォルト。ブラウザがカーソルを設定します。
cell セル（またはセルのグループ）を選択可能であることを示すカーソル。
context-menu コンテキストメニューが利用可能であることを示すカーソル。
col-resize 列の大きさを水平に調整できることを示すカーソル。
copy コピーする内容を示すカーソル。
crosshair 十字のカーソルとして表示されます。
default デフォルトのカーソル。
e-resize フレームの端を右（東）に移動するように指示するカーソル。
ew-resize 双方向調整可能なカーソルを示します。
help ヘルプが利用可能であることを示すカーソル。
move 移動できるものを示すカーソル。
n-resize フレームの端を上に移動するように指示するカーソル（北）。
ne-resize フレームの端を上と右に移動するように指示するカーソル（北/東）。
nesw-resize 双方向調整可能なカーソルを示します。
ns-resize 双方向調整可能なカーソルを示します。
nw-resize フレームの端を上と左に移動するように指示するカーソル（北/西）。
nwse-resize 双方向調整可能なカーソルを示します。
no-drop ここにはドラッグするアイテムを配置できないことを示すカーソル。
none 要素にカーソルが表示されません。
not-allowed 実行されないアクションを示すカーソル。
pointer リンクを示す指標のカーソル。
progress プログラムが忙しいことを示すカーソル（進行中）。
row-resize この行が垂直に調整可能であることを示すカーソル。
s-resize フレームの端を下に移動するように指示するカーソル（南）。
se-resize フレームの端を下と右に移動するように指示するカーソル（南/東）。
sw-resize フレームの端を下と左に移動するように指示するカーソル（南/西）。
text 選択可能なテキストを示すカーソル。
URL

カスタムカーソルのURLのカンマ区切りのリスト。

注釈：リストの最後に一般的なカーソルを指定してください。URLで定義されたカーソルが使用できない場合があります。
vertical-text 選択可能な縦方向のテキストを示すカーソル。
w-resize フレームの端を左（西）に移動するように指示するカーソル。
wait プログラムが忙しいことを示すカーソル。
zoom-in 何かを拡大できることを示すカーソル。
zoom-out カーソルは何かを拡大できることを示します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
返り値： 要素にカーソルが表示されるテキストを示す文字列。
CSS バージョン： CSS2

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート