Other
便利ツール | |||
Table自動生成ツール | Font変換ツール | その他ツール | |
CSSとJavaScriptの連携1
BackGroundChage
BackGroundChage
BackGroundChage
BackGroundChage
【ソース】
※javascript部分
<script type="text/javascript"><!--
function setCSS(){
var colorcode = "#eecb8b";
var colorcode2 = "pink";
test1.style.backgroundColor = colorcode;
test3.style.backgroundColor = colorcode2;
}
function resetCSS(){
var colorcode = "aliceblue";
var i;
test1.style.backgroundColor = colorcode;
test2.style.backgroundColor = colorcode;
test3.style.backgroundColor = colorcode;
test4.style.backgroundColor = colorcode;
}
-->
</script>
※Body部分
<form>
<input type="button" value="背景色の変更" onClick="setCSS()">
<input type="button" value="戻す" onClick="resetCSS()">
</form>
<div id="test1">BackGroundChage</div>
<div id="test2">BackGroundChage</div>
<div id="test3">BackGroundChage</div>
<div id="test4">BackGroundChage</div>
<script type="text/javascript"><!--
function setCSS(){
var colorcode = "#eecb8b";
var colorcode2 = "pink";
test1.style.backgroundColor = colorcode;
test3.style.backgroundColor = colorcode2;
}
function resetCSS(){
var colorcode = "aliceblue";
var i;
test1.style.backgroundColor = colorcode;
test2.style.backgroundColor = colorcode;
test3.style.backgroundColor = colorcode;
test4.style.backgroundColor = colorcode;
}
-->
</script>
※Body部分
<form>
<input type="button" value="背景色の変更" onClick="setCSS()">
<input type="button" value="戻す" onClick="resetCSS()">
</form>
<div id="test1">BackGroundChage</div>
<div id="test2">BackGroundChage</div>
<div id="test3">BackGroundChage</div>
<div id="test4">BackGroundChage</div>