■概要
HTMLでsytle属性を利用するとCSSの属性をタグに直接設定することができます。
JavaScriptでもQuerySelectorを利用するとstyle属性を摘要することができます。
CSSでは、複数の単語になってる属性は「–」で区別するが(例：background-color)、JavaScriptでは-ではなく、カメルケース(Camel Case)にします(例：backgroundColor)。
■使用方法
var btn = document.getElementById(“test-btn”);
btn.style.backgroundColor = “orange”;
■例
<html>
<head>
<script type=”text/javascript”>
function chgColor() {
var sqr = document.getElementById(“sqr”);
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
sqr.style.backgroundColor=’rgb(‘ + r + ‘,’ + g + ‘,’ + b + ‘)’;
}
</script>
<style>
#sqr { cursor: pointer; width: 100px; height: 100px; background-color: #ccc; }
</style>
</head>
<body>
<div>押下すると色が変わります</div>
<div id=”sqr” onclick=”chgColor()”></div>
</body>
</html>
出力結果
押下すると色が変わります
