1

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

示例
如果我在我创建的下拉菜单中选择“蓝色”，它会将我网站的背景更改为蓝色。我已经准备好所有的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 回答