2023.04.02

【JavaScript】要素を丸々書き換える方法について【コピペでOK！】

たけのこ

こんにちは！たけのこです。

今回はJavaScriptで要素を丸々置き換えてデザインを変更する方法を紹介していきます。

また、今回紹介する方法は汎用性が高く様々なところで活用できるので、覚えておくと良いかもしれません！

それでは早速見ていきましょう！

JavaScriptで要素を丸々置き換える方法について
- ボタンクリック時以外の使用例について
まとめ

JavaScriptで要素を丸々置き換える方法について

実際の開発現場でも、

「ボタンをクリックしたときに画面に表示されるアイコンを切り替えるような作りにしてほしい！！」

といった要望が来ることがあります。

そんな時に使用するコードが「innerHTML」です。

こちらのコードは、指定したIdの要素をタグの種類から付与させたい属性まで丸々書き換えることができます。

下記の参考にあるボタンを押すと、アイコンと横の文章が切り替わります。

ボタンを押すとアイコンが切り替わるよ！

また、今回の内容は下記のコードで実装することができます。

JavaScriptのコードは<script>～</script>の間です。

<p id="change_element"><i class="fas fa-question" color="orange"></i> ボタンを押すとアイコンが切り替わるよ！</p>
<button onclick="change_button()">切替ボタン</button>

<script>

function change_button (){
	document.getElementById('change_element').innerHTML = ('<i class="fas fa-lightbulb" color="orange"></i> アイコンが切り替わったよ！');
}

</script>

ボタンクリック時以外の使用例について

ボタンをクリックしたタイミング以外にも

「お昼の間は太陽のマークを表示させて、夜の時間帯になったら月のマークに切り替えてほしい！！」

といったように、時間によってアイコンや文章を切り替えたい場合はの「window.onload」関数の中で時間によって切り替えるようにすると実装することができます。

夜間は月マークです。おやすみなさい…。

こちらの処理としましては「window.onload」関数という、ページを表示したタイミングで動いてくれる関数の中で

現在時刻と自分で設定した時間を比較することによって条件に合った文章を表示しています。

また、今回の内容は下記のコードで実装することができます。

JavaScriptのコードは<script>～</script>の間です。

<p id="auto_change_element">
	<i class="fas fa-moon fa-lg" color="yellow"></i> 
	夜間は月マークです。おやすみなさい...。
</p>

<script>
window.onload = function(){
	// ↓で現在時刻の「時」のみを取り出す。
	var nowDate = new Date();
	var nowHour = nowDate.getHours();
	
	// if句で、現在時刻が「8時～18時」の間だけ太陽マークを表示するように切り替える。
	if(8 <= nowHour && nowHour < 18){
		document.getElementById('auto_change_element').innerHTML = ('<p id="auto_change_element"><i class="fas fa-sun fa-lg" color="red"></i> 日中は太陽マークです！こんにちは！！！</p>');
	}	
}
</script>

まとめ

今回はJavaScriptで要素を丸々置き換える方法についてまとめました。

上記で紹介したコードは丸々コピペすればスグに実装できるので仕様や用途に合わせて使ってみてください。

ということで、今回はこの辺りで。

ありがとうございました！

ABOUT ME