实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <style>
5
  body { background:yellow; }
6
  button { font-size:12px; margin:2px; }
7
  p { width:150px; border:1px red solid; }
8
  div { color:red; font-weight:bold;  }
9
  </style>
10
  <script src="https://code.jquery.com/jquery-latest.js"></script>
11
</head>
12
<body>
13
  <button id="getp">Get Paragraph Width</button>
14
  <button id="getd">Get Document Width</button>
15
  <button id="getw">Get Window Width</button>
16
17
  <div>&nbsp;</div>
18
  <p>
19
    Sample paragraph to test width
20
  </p>
21
<script>
22
function showWidth(ele, w) {
23
  $("div").text("The width for the " + ele +
24
                " is " + w + "px.");
25
}
26
$("#getp").click(function () {
27
  showWidth("paragraph", $("p").width());
28
});
29
$("#getd").click(function () {
30
  showWidth("document", $(document).width());
31
});
32
$("#getw").click(function () {
33
  showWidth("window", $(window).width());
34
});
35
36
</script>
37
38
</body>
39
</html>