单击按钮切换 CSS 文件

发布于 2025-01-06 09:05:14 字数 966 浏览 1 评论 0原文

我想通过单击asp.net中的按钮来切换页面的CSS,但不知何故无法做到这一点。我的代码如下:

HTML:

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

Script:

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

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

        });
    </script>

Header:

 <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,它工作得很好。 之后我可以通过使用切换等来改进我的代码。

I want to switch CSS of the page by clicking a button in asp.net, but somehow can't do that. My code as follows:

HTML:

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

Script:

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

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

        });
    </script>

Header:

 <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" />

I have 2 css files in Styles folder as day.css and night.css. The page is using day.css and should switch to night.css on clicking of any button.

If I put the .html file and both .css files in a folder, it actually works. But in Visual Studio (i.e aspx page), it's not happening. I tried other jQuery code like alert, it works fine.
i can improve my code after that by using toggle etc.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

淡忘如思 2025-01-13 09:05:14

从戴夫·沃德那里得到了答案。
我所要做的就是包含 PreventDefault() 方法。覆盖表单的默认行为。

Got the answer from Dave Ward.
All i had to do is include preventDefault() method. To ovveride the default behavior of form.

亽野灬性zι浪 2025-01-13 09:05:14

根据您的要求,此片段将为您提供帮助。

按照以下步骤操作:

您必须在同一位置创建两个 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>

As per your requirement this snippet will helps you.

Follow these steps:

you have to create two css files in same location.

1: Day.css

2: Night.css

After that use this code for switch css files.

<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>
述情 2025-01-13 09:05:14

添加一个 id attr 到链接并尝试删除链接,然后向该链接添加新链接

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

add an id attr to link and try to remove link then append new link to that

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文