HTMLDOMスタイルのカーソルプロパティ
HTML DOMスタイルのカーソルプロパティは、マウスポインタの表示中にカーソルタイプを設定または取得するために使用されます。
以下は、-
の構文です。カーソルプロパティの設定-
object.style.cursor=value
次の表は、値を示しています
| 値 | 説明 |
|---|---|
| カーソルは、何かのエイリアスが作成されることを示します | |
| カーソルは、何かを任意の方向にスクロールできることを示します | |
| auto | |
| カーソルは、セル（またはセルのセット）が選択される可能性があることを示します | |
| カーソルは、コンテキストメニューが使用可能であることを示します | |
| col-resize | カーソルは、列のサイズを水平方向に変更できることを示しています |
| カーソルは、何かがコピーされることを示します | |
| e-サイズ変更 | カーソルは、ボックスの端を右（東）に移動することを示します |
| ew-resize | |
| カーソルは、何かをつかむことができることを示しています | |
| カーソルは、何かをつかむことができることを示しています | |
| カーソルは、ヘルプが利用可能であることを示します | |
| カーソルは、何かを移動することを示しています | |
| n-サイズ変更 | カーソルは、ボックスの端を上（北）に移動することを示します |
| ne-サイズ変更 | カーソルは、ボックスの端を上下（北/東）に移動することを示します |
| nesw-resize | |
| ns-サイズ変更 | |
| nw-resize | カーソルは、ボックスの端を上下に移動することを示します（北/西） |
| nwse-resize | |
| カーソルは、ドラッグされたアイテムをここにドロップできないことを示しています | |
| カーソルは、要求されたアクションが実行されないことを示します | |
| カーソルはポインタであり、リンクを示します | |
| カーソルは、プログラムがビジーであることを示しています（進行中） | |
| row-サイズ変更 | カーソルは、行のサイズを垂直方向に変更できることを示しています |
| s-サイズ変更 | カーソルは、ボックスの端を下（南）に移動することを示します |
| se-サイズ変更 | カーソルは、ボックスの端を右下（南/東）に移動することを示します |
| sw-resize | カーソルは、ボックスの端を下および左（南/西）に移動することを示します |
| URL | |
| w-サイズ変更 | カーソルは、ボックスの端を左（西）に移動することを示します |
| カーソルは、プログラムがビジーであることを示しています | |
| カーソルは、何かを拡大できることを示しています | |
| カーソルは、何かをズームアウトできることを示しています | |
カーソルプロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<head>
<style>
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
</style>
<script>
function changeCursor() {
document.getElementById("one").style.cursor = "cell";
document.getElementById("two").style.cursor = "grab";
document.getElementById("Sample").innerHTML="Hover over the first paragraph to see cursor change to cell and on second to see it change to grab icon";
}
</script>
</head>
<body>
<p id="one">This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.</p>
<p id="two">This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.</p>
<p>Change the cursor property by clicking the below button</p>
<button onclick="changeCursor()">Change Cursor</button>
<p id="Sample"></p>
</body>
</html> 出力
「カーソルの変更」をクリックすると 」ボタンをクリックすると、カーソルが変更され、同じことが下のスクリーンショットに表示されます-
-
HTMLDOMスタイルtransformOriginプロパティ
HTML DOMスタイルのtransformOriginプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformOriginを返す object.style.transformOrigin transformOriginの変更 object.style.transformOrigin = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 x軸y軸z軸 ビュー
-
HTMLDOMスタイルのカーソルプロパティ
HTML DOMスタイルのカーソルプロパティは、マウスポインタの表示中にカーソルタイプを設定または取得するために使用されます。 以下は、-の構文です。 カーソルプロパティの設定- object.style.cursor=value 次の表は、値を示しています 値 説明 エイリアス カーソルは、何かのエイリアスが作成されることを示します すべてスクロール カーソルは、何かを任意の方向にスクロールできることを示します auto デフォルト。ブラウザがカーソルを設定します セル カーソルは、セル（またはセルのセット）が選択される可能