スタイルシートの変更

解決済

質問者：armstrong-us
質問日時：2006/05/23 22:20
回答数：1件

お世話になります。
サンプルページ作成とかで、ボタンなり文字リンクなりで簡単にスタイルを部分的に変更したいと思うのですがどうしたらいいんでしょうか？

divで囲まれた箇所のスタイルを■をクリックすることで変えられるようにしたいです。
よくある、onClicでバックカラーを変えるようなスクリプトはなんとなくわかるんですけど、div自体のスタイル変更？となってしまってどうしたらいいものかわからなくなってしまったので。
一応外部スタイルにしているので、部分的に変えるのは無理？なのかなとか思ったり。
ご教授よろしくお願いします。

例：たとえば

<div id="xxx">
テスト
</div>
<br>
<br>
■スタイル1 | ■スタイル2 | ■スタイル3

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#22259
回答日時：2006/05/23 22:56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style>
div.c1{color:black;}
div.c2{color:red;}
div.c3{color:green;}
</style>
<script type="text/javascript">
function F(n){
document.getElementById('xxx').className='c'+n;
}
</script>
</head>
<body>
<div id="xxx" class="c1">
テスト
</div>
<br>
<br>
<a href="#" onclick="F(1);return false">■スタイル1</a> |<a href="#" onclick="F(2);return false"> ■スタイル2</a>
| <a href="#" onclick="F(3);return false">■スタイル3</a>
</body>
</html>