element.scrollWidthプロパティ

element.scrollWidthは、「element」に指定した要素のスクロールビューの幅を返すプロパティ。

構文

var $scrollWidth = $elementNodeReference.scrollWidth;

戻り値

指定した要素のスクロールビューの幅。単位は、ピクセル。

サンプル

id属性がsampleである要素のスクロールビューの幅:

サンプルの動作について

「getScrollWidth()」ボタンをクリックすると、「id属性がsampleである要素のスクロールビューの幅:」の右横に「510px」と表示する。

「510px」は、id属性が「sampleContent」である要素の幅「500px」と、id属性が「sample」である要素の左のpadding「10px」を足した数値。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function getScrollWidth() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $scrollWidth = $elementNodeReference.scrollWidth;
 document.getElementById( "sampleOutput1" ).innerHTML = $scrollWidth + "px";
}
</script>

CSS

<style type="text/css">
#sample{
 overflow: scroll;
 height: 100px;
 width: 300px;
 padding: 10px;
 margin: 10px;
 background-color: #fffee7;
 border: 1px solid #dddddd;
 border-radius: 5px;
}
#sampleContent{
 width: 500px;
 height: 300px;
 background-color: yellow;
}
</style>

HTML

<div id="sample">
 <div id="sampleContent">
  <button onclick="getScrollWidth();">getScrollWidth()</button>
  <p>id属性がsampleである要素のスクロールビューの幅:<span id="sampleOutput1"></span></p>
 </div>
</div>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク