Question

我想通过单击asp.net中的按钮来切换页面的CSS，但不知何故不能这样做。我的代码如下：

HTML：

<div>
    <h1>My Website</h1>
    <br/>
    <button>Night Mode</button>
    <button>Day Mode</button>
    </div>

脚本：

<script>
        $(function () {
            $('button').click(function () {

               $('link').attr('href', 'Styles/night.css');
            });

        });
    </script>

部首：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <link  href="Styles/day.css" rel="stylesheet" type="text/css" />

我在Styles文件夹中有2个css文件，分别为day.css和night.css。该页面正在使用day.css，并且应该在单击任何按钮时切换到night.css。

如果我将.html文件和两个.css文件放在一个文件夹中，它实际上是有效的。但是在Visual Studio（即aspx页面）中，它并没有发生。我尝试了其他jQuery代码，如alert，它运行正常。之后我可以通过使用切换等来改进我的代码。

Answer 1

得到了戴夫沃德的答案。我所要做的就是包含preventDefault（）方法。 to ovveride form的默认行为。

Answer 2

根据您的要求，此代码段可以帮助您。

请按以下步骤操作：

你必须在同一个位置创建两个css文件。

1：Day.css

2：Night.css

之后，将此代码用于切换css文件。

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link href="Day.css" id="styles" rel="stylesheet" type="text/css" />

</head>
<script>
$(document).ready(function(){
$('#mode').click(function(){
if($('link#styles').attr('href')=="Day.css"){
$('#mode').attr('value','Switch To Day Mode')
$('link#styles').attr('href','Night.css')
}
else
{
$('#mode').attr('value','Switch To Night Mode')
$('link#styles').attr('href','Day.css')
}
})

});
</script>
<div class="table-responsive container">
<input type=button id="mode" text="Switch Mode" class="btn btn-primary" value="Switch To Night Mode" >  </div>
  </html>

Answer 3

添加一个id attr链接并尝试删除链接，然后将新链接附加到该

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);

按钮点击切换CSS文件

3 个答案: