戻る

要素の表示切替
要素の表示切り替えの説明となります。

displayで表示・非表示を切り替える
周辺の表示に影響します。

状態(style.display)




copy
let state1=1;//[0]非表示 [1]表示
const b1 = document.getElementById("b1");
b1.addEventListener("click", () => 
{
	//状態を切り替え
	state1=state1==0?1:0;
	let txt="";
	let state="";
	if(state1==0)
	{
		txt="非表示";
		state="none";
	}
	else
	{
		txt="表示";
		state="block";
	}
	const t1 = document.getElementById("t1");
	t1.style.display=state;
	const lbl1 = document.getElementById("lbl1");
	lbl1.textContent=txt;
});
const t1 = document.getElementById("t1");
t1.style.display=state;
style.displayプロパティに表示切り替えの値を設定することで表示を切り替えます。
none非表示
block表示
visibilityで表示・非表示を切り替える
周辺の表示には影響しません。

状態(style.visibility)




copy
let state2=1;//[0]非表示 [1]表示
const b2 = document.getElementById("b2");
b2.addEventListener("click", () => 
{
	//状態を切り替え
	state2=state2==0?1:0;
	let txt="";
	let state="";
	if(state2==0)
	{
		txt="非表示";
		state="hidden";
	}
	else
	{
		txt="表示";
		state="visible";
	}
	const t2 = document.getElementById("t2");
	t2.style.visibility=state;
	const lbl2 = document.getElementById("lbl2");
	lbl2.textContent=txt;
});
const t2 = document.getElementById("t2");
t2.style.visibility=state;
style.visibilityプロパティに表示切り替えの値を設定することで表示を切り替えます。
hidden非表示
visible表示
opacityで表示・非表示を切り替える
周辺の表示には影響しません。

状態(style.opacity)




copy
let state3=1;//[0]非表示 [1]表示
const b3 = document.getElementById("b3");
b3.addEventListener("click", () => 
{
	//状態を切り替え
	state3=state3==0?1:0;
	let txt="";
	let value=0;
	if(state3==0)
	{
		txt="非表示";
		value=0;
	}
	else
	{
		txt="表示";
		value=1;
	}
	const t3 = document.getElementById("t3");
	t3.style.opacity=value;
	const lbl3 = document.getElementById("lbl3");
	lbl3.textContent=txt;
});
const t3 = document.getElementById("t3");
t3.style.opacity=value;
style.opacityプロパティに表示切り替えの値を設定することで表示を切り替えます。
0非表示
1表示
インライン要素で表示・非表示を切り替える
周辺の表示に影響します。


状態(style.display)




copy
let state4=1;//[0]非表示 [1]表示
const b4 = document.getElementById("b4");
b4.addEventListener("click", () => 
{
	switch4();

	//状態を切り替え
	state4=state4==0?1:0;
	let txt="";
	let state="";
	if(state4==0)
	{
		txt="非表示";
		state="none";
	}
	else
	{
		txt="表示";
		state="inline";
	}
	const t4 = document.getElementById("t4");
	t4.style.display=state;
	const lbl4 = document.getElementById("lbl4");
	lbl4.textContent=txt;

});
const t4 = document.getElementById("t4");
t4.style.display=state;
style.displayプロパティに表示切り替えの値を設定することで表示を切り替えます。
none非表示
inline表示


[謝辞]
画像のサンプルとして「ソコスト」さんの画像を使用させていただいております。
ありがとうございます。
[URL]ソコスト
URL[https://soco-st.com][クリックすると開きます])


戻る
back

Toggle element visibility
This explains how to switch the display of elements.

Toggle visibility with display
This affects the display of the surroundings.

State (style.display)




copy
let state1=1;//[0]hidden [1]show
const b1 = document.getElementById("b1");
b1.addEventListener("click", () => 
{
	//oggle State
	state1=state1==0?1:0;
	let txt="";
	let state="";
	if(state1==0)
	{
		txt="hidden";
		state="none";
	}
	else
	{
		txt="show";
		state="block";
	}
	const t1 = document.getElementById("t1");
	t1.style.display=state;
	const lbl1 = document.getElementById("lbl1");
	lbl1.textContent=txt;
});
const t1 = document.getElementById("t1");
t1.style.display=state;
You can switch the display by setting the display switching value in the style.display property.
nonehidden
blockshow
Toggle display/hide with visibility
It does not affect the surrounding display.

state(style.visibility)




copy
let state2=1;//[0]hidden [1]show
const b2 = document.getElementById("b2");
b2.addEventListener("click", () => 
{
	//View Switching
	state2=state2==0?1:0;
	let txt="";
	let state="";
	if(state2==0)
	{
		txt="hidden";
		state="hidden";
	}
	else
	{
		txt="show";
		state="visible";
	}
	const t2 = document.getElementById("t2");
	t2.style.visibility=state;
	const lbl2 = document.getElementById("lbl2");
	lbl2.textContent=txt;
});
const t2 = document.getElementById("t2");
t2.style.visibility=state;
You can toggle the visibility by setting the visibility value in the style.visibility property.
hiddenhidden
visibleshow
Toggle visibility with opacity
It does not affect the surrounding display.

state(style.opacity)




copy
let state3=1;//[0]hidden [1]show
const b3 = document.getElementById("b3");
b3.addEventListener("click", () => 
{
	//Toggle State
	state3=state3==0?1:0;
	let txt="";
	let value=0;
	if(state3==0)
	{
		txt="hidden";
		value=0;
	}
	else
	{
		txt="show";
		value=1;
	}
	const t3 = document.getElementById("t3");
	t3.style.opacity=value;
	const lbl3 = document.getElementById("lbl3");
	lbl3.textContent=txt;
});
const t3 = document.getElementById("t3");
t3.style.opacity=value;
You can toggle the display by setting the style.opacity property to a value that toggles the display.
0hidden
1show
Show/hide inline elements
This affects the display of the surroundings.


state(style.display)




copy
let state4=1;//[0]hidden [1]show
const b4 = document.getElementById("b4");
b4.addEventListener("click", () => 
{
	switch4();

	//View Switching
	state4=state4==0?1:0;
	let txt="";
	let state="";
	if(state4==0)
	{
		txt="hidden";
		state="none";
	}
	else
	{
		txt="show";
		state="inline";
	}
	const t4 = document.getElementById("t4");
	t4.style.display=state;
	const lbl4 = document.getElementById("lbl4");
	lbl4.textContent=txt;

});
const t4 = document.getElementById("t4");
t4.style.display=state;
You can switch the display by setting the display switching value in the style.display property.
nonehidden
inlineshow


[Acknowledgements]
the images used are from "illustration by soco-st.com"
Thank you very much.
[URL]soco-st.com
URL[https://soco-st.com][click to open the homepage])


back



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。