第17章　jQuery - ディメンション

# **jQuery - ディメンション**

***

jQueryを使用すると、要素のサイズとブラウザウィンドウを操作しやすくなります。

jQueryには、ディメンションを扱うための重要なメソッドがいくつかあります。

* `width()`
* `height()`
* `innerWidth()`
* `innerHeight()`
* `outerWidth()`
* `outerHeight()`

## **1.jQueryのディメンション**

![graph17-1.gif](https://i.loli.net/2019/04/22/5cbd8e140472f.gif)

## **2.width()メソッドとheight()メソッド**

`width()`メソッドは、要素の幅を設定または返します（パディング、ボーダー、マージンを除く）。

`height()`メソッドは、要素の高さを設定または返します（パディング、ボーダー、マージンを除く）。

次の例では、指定された`<div>` 要素の幅と高さを返します。

#### **例**
[sample17-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt = "";
    txt += "Width of div: " + $("#div1").width() + "</br>";
    txt += "Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
<style>
#div1 {
  height: 100px;
  width: 300px;
  padding: 10px;
  margin: 3px;
  border: 1px solid blue;
  background-color: lightblue;
}
</style>
</head>
<body>

<button>Display dimensions of div</button>

<p>width() - returns the width of an element.</p>
  <p>height() - returns the height of an element.</p>

</body>
</html>
```

#### **実行結果**

<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script> 
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    var txt = &quot;&quot;;
    txt += &quot;Width of div: &quot; + $(&quot;#div1&quot;).width() + &quot;</br>&quot;;
    txt += &quot;Height of div: &quot; + $(&quot;#div1&quot;).height();
    $(&quot;#div1&quot;).html(txt);
  });
});
</script>
<style>
#div1 {
  height: 100px;
  width: 300px;
  padding: 10px;
  margin: 3px;
  border: 1px solid blue;
  background-color: lightblue;
}
</style>
</head>
<body>

<button style=&quot;font-size:inherit&quot;>Display dimensions of div</button>

<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>

</body>
</html>'" width="800" height="300"></iframe>

</span>
</pre>

***

> **練習**
>> **問題**[Ex17-1.html]

[sample17-1.html]をもとにして、`outerWidth()`と`outerHeight()`を練習しましょう。

content

第17章 jQuery - ディメンション

第17章　jQuery - ディメンション