css javascript 入門

   

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属性の読み出しはブラウザによって違うし
あまりオススメしません。

ライブラリー等では実現できますが。

クラスでデザインとプログラミングは分けてるだけでよくね。

 

PR



 - javascript 入門

Translate »