人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

htmlの質問です サイトには最初から適応されているdefo.cssとdefo2.cssの二つあります
button タグでボタンを作っているのですが
ボタンを押すとへこんでる画像にかわり defo2.cssが
もう一回ボタンを押すとへこんでない画像に戻りdefo.cssが適応されるようにしたいのですがどうすればいいでしょうか?
よろしくお願いします

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●167ポイント

こんな感じでしょうか。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function toggle_style_sheet() {
 // 切り替えるスタイルシートの LINK タグの ID
 var CSS_ID = "switch_css"

 // 二つの外部 CSS の URL
 var CSS_URL_1 = "defo.css";
 var CSS_URL_2 = "defo2.css";

 var url = CSS_URL_1 ;
 var link = document.getElementById(CSS_ID);
 if (link) {
 document.body.removeChild(link);
 var re = new RegExp("[/]?" + CSS_URL_1 + "$");
 if (re.test(link.href)) {
 url = CSS_URL_2;
 }
 }

 if (url == CSS_URL_1) {
 $("#toggle").css({border: "3px outset gray"}); // 飛び出したボタン
 } else {
 $("#toggle").css({border: "3px inset gray"}); // 押し込まれたボタン
 }

 var e = $("<link>", {
 id: CSS_ID,
 rel: "stylesheet",
 href: url,
 type: "text/css",
 media: "screen",
 });
 $(document.body).append(e);
}
$(function() {
 // 最初のスタイルシートを適用
 toggle_style_sheet();

 // 切り替えボタンを押したときの処理を登録
 $("#toggle").click(toggle_style_sheet);
});
</script>
</head>

<style>
#toggle {
 border: 3px outset gray;
 cursor: pointer;
}
</style>

<body>

<!-- スタイルシートを切り替えるボタン -->
<button id="toggle">スタイルを切り替えます</button>

<!-- 以下、スタイルが適用されるコンテンツ -->
 ...

</body>
</html>

ボタンは、へこんだ表現ができていれば良いのかなと思い、画像ではなく、border のスタイルでやってみました。

jQuery を使ってます。
が、使わないようにしても、良かったような気もします。




追記です。

画像にしたい場合はどこをいじればいいのでしょうか?

ボタンの画像を切り替えるように、先のコードを少しいじりました。
変更した辺りに、★ をコメントで入れています。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function toggle_style_sheet() {
 // 切り替えるスタイルシートの LINK タグの ID
 var CSS_ID = "switch_css"

 // 二つの外部 CSS の URL
 var CSS_URL_1 = "defo.css";
 var CSS_URL_2 = "defo2.css";

 var url = CSS_URL_1 ;
 var link = document.getElementById(CSS_ID);
 if (link) {
 document.body.removeChild(link);
 var re = new RegExp("[/]?" + CSS_URL_1 + "$");
 if (re.test(link.href)) {
 url = CSS_URL_2;
 }
 }

 // ★画像の URL を url(※) に指定してください
 if (url == CSS_URL_1) {
 $("#toggle").css({background: "url(button_off.png) no-repeat"}); // 飛び出したボタン
 } else {
 $("#toggle").css({background: "url(button_on.png) no-repeat"}); // 押し込まれたボタン
 }

 var e = $("<link>", {
 id: CSS_ID,
 rel: "stylesheet",
 href: url,
 type: "text/css",
 media: "screen",
 });
 $(document.body).append(e);
}
$(function() {
 // 最初のスタイルシートを適用
 toggle_style_sheet();

 // 切り替えボタンを押したときの処理を登録
 $("#toggle").click(toggle_style_sheet);
});
</script>
</head>

<style>
#toggle {
 /* ★ */
 height: 100px;
 width: 100px;
 border: none;
 cursor: pointer;
}
</style>

<body>

<!-- スタイルシートを切り替えるボタン -->
<button id="toggle">スタイルを切り替えます</button>

<!-- 以下、スタイルが適用されるコンテンツ -->
 ...

</body>
</html>

border のスタイルを入れ替えてたところを、背景画像を入れ替えるようにしただけですが、ボタンのスタイルもちょっと変えてます。
ボタンのスタイルは、お好みで、という感じですが、以下の二つは指定しておいた方が良いかな、と思います。


takaniiさんのコメント
画像にしたい場合はどこをいじればいいのでしょうか?

a-kuma3さんのコメント
>> 画像にしたい場合はどこをいじればいいのでしょうか? << ボタンの画像を切り替えるように変えたコードを、追記しました。

2 ● cno
●167ポイント

htmlと同じディレクトリにdefo.css(ボタンが浮き出て見えるスタイルが設定済み)と
defo2.css(ボタンがくぼんで見えるスタイルが設定済み)が配置されているものとします。また、a-kuma3さんの回答と同じくjQueryを使うものとします。
HTMLではdefo.cssのみを最初に読み込み、ボタンをクリックするたびに読み込む
スタイルシートを切り替えボタンのデザインを変更します。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 var flg=true;
 $(document).ready(function(){
 $("button").on("click",
 function(){
 if(flg){
 $("link").attr("href","defo2.css");
 }else{
 $("link").attr("href","defo.css");
 }
 flg=!flg;
 });
});
</script>
<link rel="stylesheet" href="defo.css">
<body>
<button>hello</button>
</body>
</html>

a-kuma3さんのコメント
link って、href を切り替えただけで反映されます? 自信がなかったから、タグを入れ替えちゃった (>ω・) 後、link は、ひとつじゃないような気がするから、セレクタはタグじゃない方が良いと思う。

cnoさんのコメント
a-kuma3さんこんにちは。 一応手持ち環境(Xubuntu14.04+Firefox33)では動作確認できました(jQuery1系なのでレガシーブラウザでも多分大丈夫?)。 linkの件ですが、質問者さんの内容からCSSを2パターン用意し、切り替えてスタイルの内容を変えたいのかなと思い上記のような例にしました。ボタンの見た目の変更のみならa-kuma3さんのようにクラスの入れ替えのほうがスマートでよいですね。

3 ● ジント兄さん
●166ポイント

http://q.hatena.ne.jp/1413428819
の質問でJavaScriptでやる場合…というコメントを投稿しましたが、
あのコードにちょっと手を加えれば、
今回の質問でやりたいことを実現できるんじゃないかな、と思いました。
(どうしても<button>タグを使いたいというのであれば、ごめんなさい。)

どう手を加えるのかというと、

  1. <label>タグでチェックボックスと画像を結びつける。
  2. チェックボックスの見た目をCSSのdisplay:none;で見えなくする。
  3. if節とelse節にdefo.cssとdefo2.cssの有効/無効を切り替える処理を書き足す。

3つ目についてより具体的にいうと、getElementById()とかで取得したlink要素のdisabledプロパティの値を変える方法があります。
trueにすれば、そのスタイルシートは有効無効になり、falseにすれば、無効有効になります。
http://so-zou.jp/web-app/tech/programming/javascript/css/
が参考になると思います。
コードも書いた方がいいでしょうか?



追記

<!DOCTYPE html>
<html>
<head>
<link id="defo" rel="stylesheet" type="text/css" href="defo.css" title="defo">
<link id="defo2" rel="alternate stylesheet" type="text/css" href="defo2.css" title="defo2">
<style>
#toggle {
 display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', init, false);
function init() {
 var defo = document.getElementById('defo');
 var defo2 = document.getElementById('defo2');
 defo.disabled = true;
 defo2.disabled = true;
 defo.disabled = false;
}
function toggleStyle(toggle) {
 var defo = document.getElementById('defo');
 var defo2 = document.getElementById('defo2');
 var img = document.querySelector('label[for="toggle"] img');
 defo.disabled = true;
 defo2.disabled = true;
 if (toggle.checked) {
 img.alt = '○';
 img.src = 'maru.png';
 defo.disabled = false;
 } else {
 img.alt = '×';
 img.src = 'batu.png';
 defo2.disabled = false;
 }
}
</script>
</head>
<body>
<p>
 <input type="checkbox" checked="checked" id="toggle" onclick="toggleStyle(this);">
 <label for="toggle"><img alt="○" src="maru.png"></label>
</p>
</body>
</html>

disabledの有効無効のところを逆に書いていたので訂正しました。
最初にdisabledを一度trueにしないと上手くいかないところがダサいです。


a-kuma3さんのコメント
disabled ってプロパティがあるんですね >link せっかく回答欄に来てるんだから、コード書けば良いのに。 コメントに書くより、見やすいし <tt>:-)</tt>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ