Question

我有一个网站，我想添加不同的样式。用户可以选择他想要的任何样式，我将其存储在localStorage中并显示它。我有这段代码：

<link href="default.css" type="text/css" rel="stylesheet" onload="this.href = window.localStorage['webpage_style'];"/>

这样可行，但我的按钮有问题。 default.css是白色风格 - 就像堆栈溢出一样。但新的是黑色风格，深灰色背景等。按钮的问题是：在每个页面加载新的黑色样式时，按钮为白色，然后迅速变暗，但白色时刻清晰可见，看起来很糟糕。我该怎么做才能阻止对页面加载的影响？

以下是CSS：

＆＃13;

button {
  width: 88%;
  padding: 1.5em;
  background-color: white;
  border: 1px solid black;
  margin: 1.8%;
  margin-bottom: 0.2%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #e8e8e8;
}

button:focus {
  outline: none;
}

＆＃13;

<button>Sample - Default CSS</button>

＆＃13;

button {
  width: 88%;
  padding: 1.5em;
  background-color: white;
  border: 1px solid #c8c8c8;
  /* Change here */
  margin: 1.8%;
  margin-bottom: 0.2%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  background-color: #272323;
  /* Change here */
  color: #c8c8c8;
  /* Change here */
}

button:hover {
  background-color: #3b3636;
  /* Change here */
}

button:focus {
  outline: none;
}

＆＃13;

<button>Sample - Dark CSS</button>

＆＃13;

如果不显示该效果，我该怎么办？按钮从0.3秒变为白色到黑色。有什么办法吗？或者我应该只删除CSS中的过渡行（停止效果，但还有其他方法）吗？

Answer 1

（您要告诉浏览器等待load-event，这（来自上述MDN文档）：

...在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子框架均已完成加载。

因此，如果您不需要等待DOM准备就绪，请不要使用onload。

<link href="default.css" type="text/css" rel="stylesheet" id="dynamic_stylesheet" />
<script>
if (window.localStorage['webpage_style']) {
  var styleLink = document.getElementById("dynamic_stylesheet");
  styleLink.href = window.localStorage['webpage_style'];
}
</script>

或者如果仍然引入了Flash，则可以在JS中有条件地编写样式链接。

<script>
    if (window.localStorage['webpage_style']) {
        document.write("<link href=\""+window.localStorage['webpage_style']+"\" type=\"text/css\" rel=\"stylesheet\" />");
    } else {
        document.write("<link href=\"default.css\" type=\"text/css\" rel=\"stylesheet\" />");
    }
</script>
<noscript>
    <link href="default.css" type="text/css" rel="stylesheet" />
</noscript>

Javascript - 更改页面样式而不显示上一个

1 个答案: