Mmemo

PC作業に関するメモ

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

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

/*ここは入出力*/
  document.getElementById("getBt").addEventListener("click",function(e){
  var el = document.getElementById("colorbox");
  var prop = document.getElementById("propInput").value;
  document.getElementById("output").textContent = getstyle(el,prop);
});

/*この下がメイン*/
function getstyle(element, prop){
  var style = element.currentStyle || document.defaultView.getComputedStyle(element,null);
  return style[prop];
}