HTMLAreaElement.shape - area要素のshape属性
shapeは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるshape属性を反映します。
概要
- 名前
- shape
- 所属
- HTMLAreaElement
- IDL
[CEReactions] attribute DOMString shape;
- 仕様書
- https://html.spec.whatwg.org/multipage/image-maps.html#dom-area-shape
説明
このプロパティはHTMLを反映しています。値についての説明はshape属性の項目をご参考下さい。
チュートリアル
取得、代入、どちらもできます。
HTML
<area shape="circle" coords="100,100, 50" href="./page.html" id="hoge">
JavaScript
// HTMLAreaElementを取得
var element = document.getElementById( "hoge" ) ;
取得
var value = element.shape ; // "circle"
代入
element.shape = "rect" ; // <area shape="rect" coords="100,100, 50" href="./page.html" id="hoge">
デモ
HTMLAreaElement.shapeを取得するデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<body>
<img src="../image.png" usemap="#my-circle" width="200" height="200">
<map name="my-circle">
<area shape="circle" coords="100,100, 50" href="https://syncer.jp/" alt="リンクのテキスト" target="_blank" id="hoge">
</map>
<hr>
<script>
var element = document.getElementById( "hoge" ) ;
console.log( element.shape ) ;
document.body.appendChild( new Text( element.shape ) ) ;
</script>
</body>
</html>
サポート状況
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
shape | ● | ● | ● | ● | ● | ● | ● | ● |
circle | ● | ● | ● | ● | ● | ● | ● | ● |
default | ● | ● | ● | × | × | ● | ● | ● |
poly | ● | ● | ● | ● | ● | ● | ● | ● |
rect | ● | ● | ● | ● | ● | ● | ● | ● |
circ | ● | ● | ● | × | × | ● | ● | ● |
polygon | ● | ● | ● | × | × | ● | ● | ● |
rectangle | ● | ● | ● | × | × | ● | ● | ● |
関連記事
- HTMLAreaElement.rel
- relは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるrel属性を反映します。
- HTMLAreaElement.coords
- coordsは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるcoords属性を反映します。
- HTMLAreaElement.alt
- altは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるalt属性を反映します。
- HTMLAreaElement.target
- targetは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるtarget属性を反映します。