JavaScript | CSSのスタイルを動的に変更する方法

2019-08-262022-02-04JavaScript DOM操作,JavaScript

JavaScriptを使ってCSSのスタイルを動的に変更する方法です。

要素の背景色を変更するボタン、要素のポジションを変更するボタン、また.styleで指定可能な主なstyle属性一覧を紹介しています。

要素の背景色を変更するボタン

JavaScriptを使って要素の背景色を変更するボタンを設置するサンプルです。

See the Pen JavaScript CSS color change by yochans (@yochans) on CodePen.

<div id="target"></div>
<div id="red">BLUE</div>
<div id="blue">RED</div>

#target {
	width: 100px;
	height: 100px;
	margin: 10px 0;
	align-items: center;
	justify-content: center;
	background: #9E9E9E;
	border-radius: 50%;
	color: #FFF;
	font-weight: bold;
}

#blue, #red {
	width: 100px;
	height: 30px;
	margin: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #FFF;
	font-weight: bold;
	transition: 0.5s;
	cursor: pointer;
}

#blue {
	background: #FF1744;
}

#red {
	background: #0091EA;
}

背景色切り替え用のボタン要素に、それぞれaddEventListener()を設定して、それぞれクリックされた場合にターゲット要素の背景色を変更する内容を作成しています。

押された時に切り替えて、離した際に元の色に戻したい場合は、addEventListener()でのイベントリスナーをmousedown、離した時用にmouseupのイベントを作成して対応します。

//要素を指定
const blue = document.getElementById('blue');
const red = document.getElementById('red');
const target = document.getElementById('target');

//blueボタンが押された時
blue.addEventListener('click', function () {

	target.style.background = '#FF1744';

}, false);

//redボタンが押された時
red.addEventListener('click', function () {

	target.style.background = '#0091EA';

}, false);

要素のポジションを変更するボタン

JavaScriptを使って要素の背景色を変更するボタンを設置するサンプルです。

See the Pen JavaScript CSS move item by yochans (@yochans) on CodePen.

<div id="target"></div>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>

#target {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 10px 0;
	align-items: center;
	justify-content: center;
	background: #9E9E9E;
	border-radius: 50%;
	color: #FFF;
	font-weight: bold;
}

#left, #right {
	width: 100px;
	height: 30px;
	margin: 10px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0091EA;
	border-radius: 10px;
	color: #FFF;
	font-weight: bold;
	transition: 0.5s;
	cursor: pointer;
}

ターゲット要素のpositionをrelativeにする事でtop,left,right,bottomによる位置の変更が可能になります。

X軸の切り替えようのボタン要素に、それぞれaddEventListener()を設定して、それぞれクリックされた場合にターゲット要素のX軸を20pxずつ変更する内容を作成しています。

//要素を指定
const left = document.getElementById('left');
const right = document.getElementById('right');
const target = document.getElementById('target');
//要素の初期値
let positionX = 0;

//leftボタンが押された時
left.addEventListener('click', function () {

	positionX = positionX - 20;
	target.style.left = positionX + "px";

}, false);


//rightボタンが押された時
right.addEventListener('click', function () {

	positionX = positionX + 20;
	target.style.left = positionX + "px";

}, false);

.styleで指定可能な主なstyle属性

JavaScriptの.styleで指定可能な主なstyle属性一覧です。

「font-size」などCSSでは-（ハイフン）が入った属性名の場合は「fontSize」として連結されている事に注意です。