HTMLAreaElement.coords - area要素のcoords属性

2017/09/18

coordsは、HTMLAreaElementのプロパティです。HTMLのarea要素のコンテンツ属性であるcoords属性を反映します。

概要

名前

coords

所属

IDL

[CEReactions] attribute DOMString coords;

仕様書

https://html.spec.whatwg.org/multipage/image-maps.html#dom-area-coords

説明

このプロパティはHTMLを反映しています。値についての説明はcoords属性の項目をご参考下さい。

チュートリアル

取得、代入、どちらもできます。

HTML

<area shape="circle" coords="100,100, 50" href="./page.html" id="hoge">

JavaScript

// HTMLAreaElementを取得
var element = document.getElementById( "hoge" ) ;

取得

var value = element.coords ;	// "100,100, 50"

代入

element.coords = "90,90, 45" ;	// <area shape="circle" coords="90,90, 45" href="./page.html" id="hoge">

デモ

HTMLAreaElement.coordsを取得するデモです。

<!-- このコードは編集できます。 -->

<!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.coords ) ;
document.body.appendChild( new Text( element.coords ) ) ;
</script>
</body>
</html>