![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
~~~HTML~~~
<div class="01-01">
123
</div>
<div class="02-01">
123
</div>
○○○○←ここにボタン
~~~CSS~~~
.01-01{
border:1px solid #298cef;
width: 950px;
height: 200px;
padding: 0px 0px 0px 0px;
}
.02-01{
border:1px solid #298cef;
width: 950px;
height: 200px;
padding: 0px 0px 0px 0px;
}
このようにしてスタイルシートでテーブルを作っているのですが、
ボタンを1回クリックすると、「01-01」と「02-01」のbordercolorを変更するようにしたいのですが、どうすればよいのでしょうか?
簡単にいうと、新Yahoo!Japanの色変えのように。
javascriptは全然わかりませんが、教えてくれませんか?
No.2ベストアンサー
- 回答日時:
idと違ってclassは複数のオブジェクトを指定できる分ちょっと面倒。
その前に・・・
一応classは文字規制がないことになっていますが、
数字から始まるようなものは避けた方がよいです。
こんかいはとりあえず頭にcをつけときました。
やり方としては、クラスごとごっそり替えてしまうやり方と
クラスのスタイルのborder-colorをいじるやり方があるでしょう。
いかを参考にしてください。
//test.htm
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div class="c01-01">
123
</div>
<div class="c02-01">
123
</div>
<input type="button" value="c01-01をc01-02に" onClick="changeClassName('c01-01','c01-02')">
<input type="button" value="c01-01の色を青に" onClick="changeBorderColor('c01-01','#0000ff')">
</body>
//test.css
.c01-01{
border:1px solid #298cef;
width: 950px;
height: 200px;
padding: 0px 0px 0px 0px;
}
.c01-02{
border:1px solid #ff0000;
width: 950px;
height: 200px;
padding: 0px 0px 0px 0px;
}
.c02-01{
border:1px solid #298cef;
width: 950px;
height: 200px;
padding: 0px 0px 0px 0px;
}
//test.js
function changeClassName(cn1,cn2){
var tags=document.getElementsByTagName('*');
for(var i=0;i<tags.length;i++){
if(tags[i].className==cn1) tags[i].className=cn2;
}
}
function changeBorderColor(cn,color){
var tags=document.getElementsByTagName('*');
for(var i=0;i<tags.length;i++){
if(tags[i].className==cn) tags[i].style.borderColor=color;
}
}
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- 防災 【自衛隊のPX品のPXってどういう意味ですか?】 3 2022/07/02 13:12
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
学習サイトを見よう見まねで、J...
-
mouseoverで、リンクをずらす。
-
ajax を使って,htmlを読み...
-
Google マップ でKMLの情報が正...
-
javascript htmlの追記について
-
VBAでCOPYを繰り返すと、処理が...
-
「ご処理進めて頂きますようお...
-
Excelシート上のマクロを登録し...
-
「PC Helpsoft Driver Updated...
-
エクセルで、日付を入力すると...
-
サブフォームのイベント取得
-
UWSC 画像認識で条件分岐
-
switch の範囲指定
-
スマホF-51Bに緊急時情報画面で...
-
VBA シート毎に画像挿入
-
csvに保存しているデータをURL...
-
DAOでSQLServerに接続し、LeftJ...
-
VBA エンターキーでイベントに...
-
お家デートをしててハグを長い...
-
UWSCを使って画像リンクをクリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
JavaScriptのinnerHTMLの挙動に...
-
3重のクォーテーション
-
JavascriptのHTMLクラス表示に...
-
クリックすると、色が変わるよ...
-
特定の条件のHTML要素を一括で...
-
折りたたみを全て開いて別ペー...
-
jqueryを使ったスムーススクロ...
-
jQuery 画面サイズにスライド画...
-
2回目以降のページロード時には...
-
Bootstrap Javascriptでモーダル
-
jQueryのSlickで矢印アイコンが...
-
javascriptとcssでフォントサイ...
-
JavaScriptのdiv.style属性の変...
-
フォームで「パスワード(確認...
-
macかwinか判別しスタイルシー...
-
javascript htmlの追記について
おすすめ情報