jQueryを使わずに要素のスタイルを取得する

Web制作

• CSS
• JavaScript
• 関数

DEMO

概要

jQueryを使わずに任意の要素のスタイルを取得する。

input欄に取得したいプロパティを入力し、GETボタンを押すと出力される。

コード

HTML

<div id="colorbox">対象要素</div>
<input id="propInput" type="text" placeholder="input" value="color">
<button id="getBt">GET</button>
<span id="output">-</span>

JavaScript

const el_colorbox = document.getElementById("colorbox");
const el_input = document.getElementById("propInput");
const el_output = document.getElementById("output");

document.getElementById("getBt").addEventListener("click",()=>{
  const el_colorbox = document.getElementById("colorbox");
  const prop = el_input.value;
  const style = window.getComputedStyle(el_colorbox);
  el_output.textContent = style[prop] || '(undefined)';
});