css javascript 入門
css javascript
cssをjavascriptで設定できます。
やり方は簡単です。
変数名.style.プロパティ名 = “値”;
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
p.style.backgroundColor = “#ccc”;
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はp要素に灰色がつきます。
けどjavascript とcssを分離したいこともあるかもしれません。
クラス名をつけて管理することができます。
p.className =”クラス名”;
楽勝ですね。
おちゃのこさいさいです。
<style type=”text/css”>
<!– .red { color: red; } –><br />
</style>
<script type=”text/javascript”>
function helloworld(){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
p.className =”red”;
}
</script>
<form><input type=”button” value=”ここをクリック” />
</form>
実行結果はp要素に赤文字になります。
style属性の読み出しはブラウザによって違うし
あまりオススメしません。
ライブラリー等では実現できますが。
クラスでデザインとプログラミングは分けてるだけでよくね。