javascriptでstyle属性のheightプロパティ値を変更したい

前提・実現したいこと

javascriptでstyle属性のheightプロパティ値を変更したい。(200pxから500pxに変更したい)

javascriptを始めたばかりなのですが、jQueryを使わずにjavascriptからheight値の変更をできそうなものがこれくらいしか見つからず、実行してみてもエラーがでてできない状況です。
やはり、jQueryを使わなければ難しいのでしょうか？

発生している問題・エラーメッセージ

HTML
1Uncaught TypeError: Cannot set property 'height' of undefined
2    at effect (study.html:9)
3    at HTMLInputElement.onclick (study.html:15)

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <script type="text/javascript">
7      function effect(){
8        var header_height=document.getElementsByTagName('header');
9        header_height.style.height='500px';
10      }
11    </script>
12  </head>
13  <body>
14    <header style="height: 200px;">
15      <input type="button" onclick="effect();"/>
16
17    </header>
18    <main>
19
20    </main>
21  </body>
22</html>

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/12/28 08:48

（質問文は編集できます）質問文のコード／エラーはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

ベストアンサー

getElementsByTagNameは複数の要素が格納できる HTMLCollection という物を返すので、たとえ一つしか要素が無くても[0]をつけるなりする必要があります。

js
1header_height[0].style.height='500px';

【Document.getElementsByTagName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

Document インターフェイスの getElementsByTagName メソッドは、指定されたタグ名を持つ要素の HTMLCollection を返します。

投稿2019/12/28 09:22

kei344

総合スコア69596

kei344

2019/12/28 09:26

既に回答も出ていますが、要素の取得は querySelector / querySelectorAll をうまく使えば getElementById / getElementsByClassName / getElementsByName / getElementsByTagName などは使わなくても良いとおもいます。【Document.querySelector() - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector 【Document.querySelectorAll() - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

beginner_2019

2019/12/28 09:43

無事一歩進めましたありがとうございました。

行動規範の内容に同意します

直接element.style～でDOMを操作しても良いですが、classのつけ外しで行う方法の方が複数指定する場合などでは便利です。

html
1<header class="header">
2  <input class="header__button" type="button" value="stretch"> 
3</header>

JavaScript
1const header = document.querySelector('.header');
2const button = document.querySelector('.header__button');
3
4button.addEventListener('click', () => {
5  header.classList.toggle('header--stretch');
6})

動作デモ → https://jsfiddle.net/4b57y0ah/

投稿2019/12/28 09:09

take-t.t.

総合スコア360

beginner_2019

2019/12/28 09:37

ご回答ありがとうございます。クラスのつけ外しはすごくためになったのですが、僕はpageYOffsetなどを使いスクロールした値を取得しstyle.heightで height: (元のheaderのheight) - (スクロールした値)　のようスクロールするたびに高さを変えるようにしたいです。そのためにstyle.heightを使用したのですが、まったくうまくいかない状態です。 style.heightの使い方を間違えているのでしょうか？できれば教えていただきたいです。よろしくお願いします。

take-t.t.

2019/12/28 09:48 編集

本来エラーについて回答すべきだったのですが、読み飛ばしてしまって質問内容を勝手な解釈をしてしまい微妙に頓珍漢な回答になってしまい申し訳ありません。エラーの理由についてはkei334さんが仰っている通り、getElementsByTagNameの使い方のミスなので、そこを直すなりquerySlectorを使用するなりで改善すると思います。

beginner_2019

2019/12/28 09:44

無事解決しました、ありがとうございました。

行動規範の内容に同意します

あなたの回答