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

JavaScriptイベント

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

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

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

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

動作サンプル

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

サンプルコード

HTML

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

CSS

#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;
}

JavaScript

//切り替えボタン要素を指定
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);

コード説明

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

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

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

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

動作サンプル

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

サンプルコード

HTML

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

CSS

#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;
}

JavaScript

//移動ボタン要素を指定
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);

コード説明

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

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

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

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

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

background背景色ほか
backgroundImage背景画像
color文字色
textAlign文字揃え
textDecoration下線など
borderborder関連
borderRadius角丸
width,height幅や高さ
top,left,right,bottom位置
marginマージン
paddingパディング
zIndex重なり
positionposition属性
animationアニメーション関連
displayblockやflexなど

JavaScriptイベント

Posted by Yousuke.U