SYNCERのロゴ
アイキャッチ画像

DOMRectReadOnly.left - 左辺の位置

leftは、DOMRectReadOnlyのプロパティです。ドキュメントの左端から矩形の左辺までの距離を返します。

概要

名前
left
所属
DOMRectReadOnly
IDL
readonly attribute unrestricted double left;
仕様書
https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-left

説明

ドキュメントの左端から矩形の左辺までの距離をピクセル単位の数値で返す。

読み取り専用のため、値は代入できない。

デモ

DOMRectReadOnly.leftのデモです。黄色い背景の要素のDOMRectを取得し、そのプロパティの値を参照しています。また、その矩形にスタイルシートで赤色の枠線を付けています。

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

<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
.dom-rect { position: absolute ; border: 1px solid red ; }

div#hoge {
	margin: 30px 0 0 45px ;
	width: 200px ;
	height: 150px ;
	line-height: 150px ;
	text-align: center ;
	background-color: #fffff0 ;
}
</style>
</head>
<body>
<div id="hoge">SYNCER</div>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;

var domRect = element.getBoundingClientRect() ;
console.log( domRect ) ;
appendText( "\t" + domRect + "\n" ) ;

appendText( "\t\t" + "x: " + domRect.x + "\n" ) ;
appendText( "\t\t" + "y: " + domRect.y + "\n" ) ;
appendText( "\t\t" + "width: " + domRect.width + "\n" ) ;
appendText( "\t\t" + "height: " + domRect.height + "\n" ) ;
appendText( "\t\t" + "top: " + domRect.top + "\n" ) ;
appendText( "\t\t" + "right: " + domRect.right + "\n" ) ;
appendText( "\t\t" + "bottom: " + domRect.bottom + "\n" ) ;
appendText( "\t\t" + "left: " + domRect.left + "\n" ) ;

createDOMRectElement( domRect ) ;	// コメントアウトしてみよう!

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}

function createDOMRectElement ( domRect ) {
	var domRectElements = document.getElementsByClassName( "dom-rect" ) ;

	for( var i=0,l=domRectElements.length; l>i; i++ ) {
		domRectElements[0].parentNode.removeChild( domRectElements[0] ) ;
	}

	var domRectElement = document.createElement( "div" ) ;
	domRectElement.className = "dom-rect" ;
	domRectElement.style.left = (domRect.x - 1) + "px" ;
	domRectElement.style.top = (domRect.y - 1) + "px" ;
	domRectElement.style.width = domRect.width + "px" ;
	domRectElement.style.height = domRect.height + "px" ;
	document.body.appendChild( domRectElement ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月16日 (月)
コンテンツを公開しました。