Javascript MEMO

タグの表示切り替え

javascriptでタグの表示切替

このサンプルではdivタグを用いた表示切り替えのサンプルとなります。

[プログラム]

/*
<div id=div1 style="display:block;">divタグを表示しています。</div>
<input type=hidden id=display value=0>
<button id=sample1 >javascript(style.display)の切り替え</button>
*/
function test1()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="block";
	}
	else
	{
		result = 0;
		status="none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.display=status;
}
//javascript(style.display)の切り替え
let btn1=document.getElementById("sample1");
btn1.addEventListener("click", test1);

[プログラム]

/*
<div id=div1 style="display:block;">divタグを表示しています。</div>
<input type=hidden id=display value=0>
<button id=sample2 >javascript(setProperty)の切り替え</button>
*/
function test2()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="block";
	}
	else
	{
		result = 0;
		status="none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.setProperty("display", status);
}
//javascript(setProperty)の切り替え
let btn2=document.getElementById("sample2");
btn2.addEventListener("click", test2);

[プログラム]

/*
<div id=div1 style="display:block;">divタグを表示しています。</div>
<input type=hidden id=display value=0>
<button id=sample3 >javascript(cssText)の切り替え</button>
*/
function test3()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="display:block";
	}
	else
	{
		result = 0;
		status="display:none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.cssText=status;
}
//javascript(cssText)の切り替え
let btn3=document.getElementById("sample3");
btn3.addEventListener("click", test3);

divタグを表示しています。

戻る

back

Tag display switching

Switching tag display with javascript

This sample shows how to switch displays using div tag.

[program]

/*
<div id=div1 style="display:block;">Showing div tag</div>
<input type=hidden id=display value=0>
<button id=sample1 >javascript(style.display) switch</button>
*/
function test1()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="block";
	}
	else
	{
		result = 0;
		status="none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.display=status;
}
//javascript(style.display) switch
let btn1=document.getElementById("sample1");
btn1.addEventListener("click", function(){
	test1();
});

[program]

/*
<div id=div1 style="display:block;">Showing div tag</div>
<input type=hidden id=display value=0>
<button id=sample2 >javascript(setProperty) switch</button>
*/
function test2()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="block";
	}
	else
	{
		result = 0;
		status="none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.setProperty("display", status);
}
//javascript(setProperty) switch
let btn2=document.getElementById("sample2");
btn2.addEventListener("click", test2);

[program]

/*
<div id=div1 style="display:block;">Showing div tag</div>
<input type=hidden id=display value=0>
<button id=sample3 >javascript(cssText) switch</button>
*/
function test3()
{
	let result=document.getElementById("display").value;
	let status="";
	if(result==0)
	{
		result = 1;
		status="display:block";
	}
	else
	{
		result = 0;
		status="display:none";
	}
	document.getElementById("display").value=result;
	document.getElementById("div1").style.cssText=status;
}
//javascript(cssText) switch
let btn3=document.getElementById("sample3");
btn3.addEventListener("click", test3);

Showing div tag

back