1

ドロップダウンメニューに基づいてさまざまな代替背景色を使用したいWordPressカスタムテーマがあります。テーマの背景色を変更するためだけに別のスタイルシートを使用するつもりでしたが、逆効果のようです。また、クラスを使用して背景色を変更するつもりでしたが、選択した色に基づいて背景色を変更するための最善の方法がよくわかりません。

例
作成したドロップダウンメニューで[青]を選択すると、Webサイトの背景が青に変わります。すべてのCSSを配置しました。私は今、これを行うための最善の方法は何であるか疑問に思っています。Internet Explorer用のクラスが用意されているので、クラスを使用することにした場合、クラスの使用方法がわかりません。jQueryを使用できると思いますか？

突然の質問で申し訳ありませんが、どちらが最も効率的な方法かはよくわかりません。

4

2 に答える 2

0

jQuery でこれを実現する方法を次に示します。必要に応じて、ボディにクラスを追加することもできますが、最初に他のクラスを削除することを忘れないでください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#colour').change(function(){
        $('body').css('background',$(this).val());
      });
    });
  </script>
  </head>
  <body>

    <select id="colour">
      <option value="">Please Select
      <option value="#00F">Blue</option>
      <option value="#F00">Red</option>
      <option value="#0F0">Green</option>
    </select>

  </body>
</html>

またはクラス経由：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#colour').change(function(){
        $('body').removeClass('blue red green').addClass($(this).val());
      });
    });
  </script>
  <style type="text/css">
    .blue { background: #00F; }
    .green { background: #0F0; }
    .red { background: #F00; }
  </style>
  </head>
  <body>

    <select id="colour">
      <option value="">Please Select
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
    </select>

  </body>
</html>
于 2012-08-09T11:43:59.907 に答える
0

そして、jQuery の知識がそれほど高くない場合の JavaScript メソッドを次に示します。

HTML :

<!DOCTYPE html>
<html>
    <body>
        <select id="bgChange" onChange="bgChange()">
            <option value="lavender">Lavender</option>
            <option value="steelblue">Steelblue</option>
            <option value="mintcream">Mintcream</option>
        </select>
    </body>
</html>

JavaScript :

function bgChange() {
    var theForm = document.getElementById("bgChange")
    var theValue = theForm.options[theForm.selectedIndex].value
    document.body.bgColor = theValue
}

実際の例: http://jsfiddle.net/ANH4B/2/

于 2012-08-09T13:43:48.397 に答える