Javascript MEMO

現在の言語: 日本語

選択した画像の周囲を枠で囲んだように見せる処理

色関連

[選択した画像の周囲を枠で囲んだように見せる処理]

画像がjpgのような不透明であれば枠のように表示されます。
画像が透過色であれば背景が指定した色に変更されます。

[サンプル]

</style>

copy

//d1:[0]すべて [1]個別
//d2:個別のみインデックスと一致する背景色を変更
async function func(d1,d2)
{
	for(let i=0;i<4;i++)
	{
		document.getElementById('span'+i).style.backgroundColor = "transparent";
	}
	if(d1==0)return;
	document.getElementById('span'+d2).style.backgroundColor = "red";//"rgb(255 240 245 / 0.50)";
}

window.addEventListener('DOMContentLoaded', ()=>
{
	for(let i=0; i < 4; i++)
	{
		document.getElementById('img'+i).src = "img"+String(i+1)+".png";
	}
});

copy

//d1:[0] All [1] Individual
//d2: Change the background color for each individual index
async function func(d1,d2)
{
	for(let i=0;i<4;i++)
	{
		document.getElementById('span'+i).style.backgroundColor = "transparent";
	}
	if(d1==0)return;
	document.getElementById('span'+d2).style.backgroundColor = "red";//"rgb(255 240 245 / 0.50)";
}

window.addEventListener('DOMContentLoaded', ()=>
{
	for(let i=0; i < 4; i++)
	{
		document.getElementById('img'+i).src = "img"+String(i+1)+".png";
	}
});

display: inline-block;

背景色とサイズが正しく反映するために使用しています。

display:inline-block; width:50px; height:50px; padding: 5px; box-sizing: border-box;

枠を見せるため
spanのサイズはそのままで、内側に余白（padding）を設定します。
box-sizing: border-box; を入れることで、全体のサイズを50pxに保ったまま内側に余白を作れます。

[javascript]

const obj = document.getElementById('xxx');
obj.style.backgroundColor = "red";
obj.style.padding = '5px'; // ここで余白を作ると背景色が見えるようになります
obj.style.boxSizing = 'border-box';

戻る

著作権情報

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