Question

我有一个WordPress自定义主题，我希望基于下拉菜单有各种替代背景颜色。我打算使用替代样式表来改变我主题的背景颜色，但这似乎适得其反。我也打算用类来改变背景颜色，只是我不太确定哪种是基于所选颜色改变背景颜色的最佳方法。

实施例的
如果我在我创建的下拉菜单中选择“蓝色”，它会将我网站的背景更改为蓝色。我已经把所有的CSS都安排好了。我现在只是想知道这样做最好的方法是什么。我有适用于Internet Explorer的类，所以如果我决定使用类，我不知道如何使用类。我想我可以使用jQuery？

对于这个突然的问题感到抱歉，但我不确定哪种方式最有效。

Answer 1

这是在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>

Answer 2

如果您对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/

替代背景颜色

2 个答案: