htmlの質問です サイトには最初から適応されているdefo.cssとdefo2.cssの二つあります

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/10/17 02:46:02
  • 終了:2014/10/24 02:50:04

回答(3件)

id:a-kuma3 No.1

a-kuma3回答回数4537ベストアンサー獲得回数18882014/10/17 11:46:01

ポイント167pt

こんな感じでしょうか。

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

  • height, width は 100% にして背景画像に合わせる
  • border を none にして、デフォルトのボタンのふちを消す
id:takanii

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

2014/10/18 05:18:25
id:a-kuma3

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

ボタンの画像を切り替えるように変えたコードを、追記しました。

2014/10/18 12:10:11
id:cno No.2

cno回答回数124ベストアンサー獲得回数122014/10/17 23:43:09

ポイント167pt

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>
id:a-kuma3

link って、href を切り替えただけで反映されます?
自信がなかったから、タグを入れ替えちゃった (>ω・)

後、link は、ひとつじゃないような気がするから、セレクタはタグじゃない方が良いと思う。

2014/10/18 01:06:41
id:cno

a-kuma3さんこんにちは。

一応手持ち環境(Xubuntu14.04+Firefox33)では動作確認できました(jQuery1系なのでレガシーブラウザでも多分大丈夫?)。

linkの件ですが、質問者さんの内容からCSSを2パターン用意し、切り替えてスタイルの内容を変えたいのかなと思い上記のような例にしました。ボタンの見た目の変更のみならa-kuma3さんのようにクラスの入れ替えのほうがスマートでよいですね。

2014/10/18 11:15:29
id:jislotz No.3

ジント兄さん回答回数19ベストアンサー獲得回数72014/10/17 23:48:04

ポイント166pt

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にしないと上手くいかないところがダサいです。

id:a-kuma3

disabled ってプロパティがあるんですね >link

せっかく回答欄に来てるんだから、コード書けば良いのに。
コメントに書くより、見やすいし :-)

2014/10/18 01:10:48

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません