blob: 040210e909bdd3d3dd0b26656c540c975d59c38e (
plain)
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: Element.scrollWidth
slug: Web/API/element/scrollWidth
tags:
- 元素属性
translation_of: Web/API/Element/scrollWidth
---
<div>{{ APIRef("DOM") }}</div>
<div><strong><code>Element.scrollWidth</code></strong> 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。</div>
<p><code>scrollWidth</code>值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与{{domxref("Element.clientWidth", "clientWidth")}}相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如{{cssxref("::before")}}或{{cssxref("::after")}}。 如果元素的内容可以适合而不需要水平滚动条，则其<code>scrollWidth</code>等于{{domxref("Element.clientWidth", "clientWidth")}}</p>
<div class="note">
<p>1. 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用{{ domxref("element.getBoundingClientRect()") }}<em>.</em></p>
<p><em>2. 在实际测试过程中，谷歌获取的 </em><strong><code>Element.scrollWidth</code></strong> 和 IE，火狐下获取的 <strong><code>Element.scrollWidth</code></strong> 并不相同</p>
</div>
<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>
<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;
</pre>
<p>xScrollWidth 的值是元素的内容宽度。</p>
<h2 id="Example" name="Example">例子</h2>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#aDiv {
width: 100px;
}
button {
margin-bottom: 2em;
}
</style>
</head>
<body>
<div id="aDiv">
FooBar-FooBar-FooBar-FooBar
</div>
<button id="aButton">
Check for overflow
</button>
<div id="anotherDiv">
FooBar-FooBar-FooBar-FooBar
</div>
<button id="anotherButton">
Check for overflow
</button>
</body>
<script>
var buttonOne = document.getElementById('aButton'),
buttonTwo = document.getElementById('anotherButton'),
divOne = document.getElementById('aDiv'),
divTwo = document.getElementById('anotherDiv');
//check to determine if an overflow is happening
function isOverflowing(element) {
return (element.scrollWidth > element.offsetWidth);
}
function alertOverflow(element) {
if (isOverflowing(element)) {
alert('Contents are overflowing the container.');
} else {
alert('No overflows!');
}
}
buttonOne.addEventListener('click', function() {
alertOverflow(divOne);
});
buttonTwo.addEventListener('click', function() {
alertOverflow(divTwo);
});
</script>
</html></code></pre>
<h2 id="Specification" name="Specification">规范</h2>
<p>The <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> defines <code>scrollWidth</code></p>
<h2 id="See_also" name="See_also">相关</h2>
<ul>
<li>{{domxref("Element.clientWidth")}}</li>
<li>{{domxref("Element.offsetWidth")}}</li>
<li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
</ul>
|
