如何根据下拉菜单中的选项更改页面的样式表

Question

我正在创建一个与外部样式表有链接的页面，现在我创建了更多样式表并在页面中添加了一个下拉菜单，现在如何将这些选项与外部样式表链接，以便一旦用户从下拉菜单中选择一个选项，该页面的样式表应该完全更改为新样式表...我该怎么做？

<div style="float:right;padding:26px 0 0 0;color:#fff;"><select>
      <option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>

</div> 

我有上面的下拉菜单..

Answer 1

    try this :)

1. give a id to your select box say(giveAId)
2. then in jquery function pass this id and apply a change function('this will notice the   the change made in your select box').
3. get it's value from option box 
4. then pass it to the link href like in this example


 <script type="text/javascript">
    $(function() {
        $("#giveAId").change(function(){ //2 step
           var stylesheet = $(this).val(); // 3 step
           $('link').attr('href',stylesheet+ '.css'); //4 step done here
          });
    });

 </script>


    <div  style="float:right;padding:26px 0 0 0;color:#fff;">
       <select id="giveAId"> // 1 step
          <option>please select your choice</option>
          <option value="one">green</option>
          <option value="two">red</option>
        </select>
    </div> 

Answer 2

您可以为用户提供一个 cookie，该 cookie 记住他们从菜单中选择的样式表，并根据该 cookie 加载页面的 CSS。 然后就让它在点击时刷新页面，如果需要，可以使用 AJAX。

Answer 3

提交表单并使用 session/cookies 来记住选择

例如

$_SESSION['selected_stylesheet'] = $_POST['stylesheet'];

然后在调用外部 css 文件时应该使用 $_SESSION['selected_stylesheet']

<link type="text/css" href="<? echo $_SESSION['selected_stylesheet'] ?>.css" rel="stylesheet" />

我认为这会奏效

Answer 4

我尝试在具有自定义主题的wordpress中使用此功能，但没有用。 更改时丢失所有格式...有人看到我错了吗？

 <script type="text/javascript">
$(function() {
    $("#changeCSS").change(function(){ //2 step
       var stylesheet = $(this).val(); // 3 step
       $('link').attr('href',stylesheet+ '.css'); //4 step done here
      });
});

<div  style="position:absolute;top:20px;right:0px;padding:26px 0 0 0;color:#fff;">
   <select id="changeCSS"> // 1 step
      <option>please select your choice</option>
      <option value="style">Alternating</option>
      <option value="style2">Images Aligned Right</option>
      <option value="style3">Images Aligned Left</option>
    </select>
</div>