files/de/web/api/element/scrollwidth/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

---
title: Element.scrollWidth
slug: Web/API/Element/scrollWidth
tags:
  - Eigenschaft
  - Referenz
translation_of: Web/API/Element/scrollWidth
---
<div>{{ APIRef("DOM") }}</div>

<p>Die schreibgeschützte Eigenschaft <code><strong>Element.scrollWidth</strong></code> liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die <code>scrollWidth</code> des Elementes größer als seine <code>clientWidth</code>.</p>

<div class="note">
<p>Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.</p>
</div>

<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>

<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>

<p><code><var>xScrollWidth</var></code> ist die Breite des Inhaltes des Elementes <code>element</code> in Pixeln.</p>

<h2 id="Example" name="Example">Beispiel</h2>

<pre class="brush:html">&lt;div id="aDiv" style="width: 100px; height: 200px; overflow: auto;"&gt;
  FooBar-FooBar-FooBar
&lt;/div&gt;
&lt;br&gt;
&lt;input
  type="button"
  value="Show scrollWidth"
  onclick="alert(document.getElementById('aDiv').scrollWidth);"
&gt;</pre>

<h2 id="Specification" name="Specification">Spezifikation</h2>

<p>Die Eigenschaft <code>scrollWidth</code> ist im <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> definiert.</p>

<h2 id="References" name="References">Referenzen</h2>

<p>{{Compat("api.Element.scrollWidth")}}</p>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{domxref("Element.clientWidth")}}</li>
 <li>{{domxref("HTMLElement.offsetWidth")}}</li>
 <li><a href="/de-DE/docs/Determining_the_dimensions_of_elements">Bestimmung der Abmessungen von Elementen</a></li>
</ul>