个人中心
gpt4 book ai didi

javascript - 使用 Javascript 淡入和淡出 CSS 样式表

转载 作者：行者123 更新时间：2023-11-29 14:43:49 31 4
gpt4 key购买 nike

我正在尝试使用 Javascript 在我的网站中实现更优雅的元素。

Snippet

<script>
    function nightmode(){
    var el = document.getElementById('myStyles'); // get stylesheet

    if ( el !== null ) {                // if it exists
        el.parentNode.removeChild(el);  // remove it
    } else {                            // if not, add it
        var oLink = document.createElement("link") 

        oLink.id   = 'myStyles';
        oLink.href = "nightmode3.css";
        oLink.rel = "stylesheet"; 
        oLink.type = "text/css"; 

        document.body.appendChild(oLink);
    }
}
</script>

这会将站点切换到夜间模式。如果您单击该按钮，它会打开或关闭夜间模式。很简单。

但是，我希望每次点击时有 0.5 秒的淡入/淡出效果，以减少不和谐。我试过通过 CSS 添加它，但这只适用于淡入。我怎样才能同时获得淡入和淡出效果？

最佳答案

这里有几种不同的方法可以在您切换样式时保持过渡效果。要牢记的基本事项是，您必须有一个可用的转换规则才能发生转换。如果您在一种样式中使用它而在另一种样式中没有，则只有在您更改为具有它的样式时才会发生这种情况，否则就没有规定需要进行转换。

<link>交换方法

基本上，确保转换规则始终可用。如果它们在您的夜间/白天样式表中而不是其他样式表中，则不再有转换规则。这就是为什么它只会在您淡入时起作用。

理想情况下，您可能希望将两组规则放在一个文件中，然后使用 <body> 上的类在事件样式之间切换标签。但是，在某些用例中，您可能仍希望使用两个不同的样式表，但它们不会同时加载。例如，并非所有用户都使用的高对比度样式表会浪费内存。但是，我仍然可能会在 <body> 上使用类属性标记以防我想将它们组合起来。

index.html

<html>

<head>
    <title>CSS Test</title>
    <link rel="stylesheet" href="base.css">
    <script src="index.js"></script>
</head>

<body>
    <main>
        <h1>Hello!</h1>
        <p>I am text</p>
        <ul>
            <li>
                <button id="day_mode">Day</button>
            </li>
            <li>
                <button id="night_mode">Night</button>
            </li>
        </ul>
    </main>
</body>

</html>

index.js

/*jslint browser:true*/

(function () {
    "use strict";

    function addStylesheet(name, loc) {
        var sheet = document.createElement("link");
        sheet.id = name;
        sheet.href = loc;
        sheet.rel = "stylesheet";
        sheet.type = "text/css";

        document.head.appendChild(sheet);

        return sheet;
    }

    function removeStylesheet(sheet) {
        sheet.parentNode.removeChild(sheet);
        //document.getElementById(name).removeChild();
    }

    function go() {
        var dayButton = document.getElementById("day_mode"),
            nightButton = document.getElementById("night_mode"),
            daySheet,
            nightSheet;

        dayButton.addEventListener("click", function (e) {
            e.preventDefault();
            if (!daySheet) {
                if (nightSheet) {
                    removeStylesheet(nightSheet);
                    nightSheet = null;
                }
                daySheet = addStylesheet("day", "day.css");
            }
        });

        nightButton.addEventListener("click", function (e) {
            e.preventDefault();
            if (!nightSheet) {
                if (daySheet) {
                    removeStylesheet(daySheet);
                    daySheet = null;
                }
                nightSheet = addStylesheet("night", "night.css");
            }
        });
    }
    document.addEventListener("DOMContentLoaded", go);
}());

base.css

h1 {
    transition: color 1s;
}

p {
    transition: background-color 1s, color 1s;
}

day.css

h1 {
    color: orange;
}

p {
    background-color: yellow;
    color: red;
}

night.css

h1 {
    color: blue;
}

p {
    background-color: black;
    color: blue;
}

<body>类命名空间

如果您确实想尝试 <body>类方法，这里是一个简短的实现，展示了如何做到这一点。

基本原理是，对于要使用的 CSS 的每个版本(白天/晚上)，您都有一个命名空间，并在这些模式规则前加上相关的命名空间。

然后，使用 JavaScript，您将从 <body> 中删除或添加命名空间类使用 document.body.classList.add() 标记和 document.body.classList.remove() .

/*jslint browser:true*/

(function() {
  "use strict";

  function go() {
    var dayButton = document.getElementById("day_mode"),
      nightButton = document.getElementById("night_mode");

    dayButton.addEventListener("click", function(e) {
      e.preventDefault();
      document.body.classList.remove("night");
      document.body.classList.add("day");
    });

    nightButton.addEventListener("click", function(e) {
      e.preventDefault();
      document.body.classList.remove("day");
      document.body.classList.add("night");
    });
  }
  document.addEventListener("DOMContentLoaded", go);
}());
h1 {
  transition: color 1s;
}
p {
  transition: background-color 1s, color 1s;
}
body.day h1 {
  color: orange;
}
body.day p {
  background-color: yellow;
  color: red;
}
body.night h1 {
  color: blue;
}
body.night p {
  background-color: black;
  color: blue;
}
<html>

<head>
  <title>CSS Test</title>
  <link rel="stylesheet" href="index2.css">
  <script src="index2.js"></script>
</head>

<body class="day">
  <main>
    <h1>Hello!</h1>
    <p>I am text</p>
    <ul>
      <li>
        <button id="day_mode">Day</button>
      </li>
      <li>
        <button id="night_mode">Night</button>
      </li>
    </ul>
  </main>
</body>

</html>

备用样式表关系

另一件需要注意的事情是，如果您使用 <link ... rel="stylesheet alternate" ...>方法，过渡也仍然有效。我不确定哪些浏览器仍然为用户提供手动切换他们喜欢的渲染风格的方法。 Chrome 不提供方法，但 FireFox 提供。请参见下面的屏幕截图。

FireFox Page Style Menu

这是我为我的 <head> 使用的标记元素。

<head>
    <title>CSS Test</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="day.css" title="Day">
    <link rel="stylesheet alternate" href="night.css" title="Night">
    <script src="index.js"></script>
</head>

关于javascript - 使用 Javascript 淡入和淡出 CSS 样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35092417/

31 4 0
文章推荐： javascript - 是否可以在每个 npm install 事件上运行一些脚本？
文章推荐： javascript - 如何在光标坐标处打开自己的上下文菜单？
文章推荐： javascript - 如何在 jquery ajax 模板中添加两个不同绑定(bind)变量的值，如 ${amount} 和 ${tax}？
文章推荐： android - 从主线程调用的 RxAndroid
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com