Question

我是CSS和JavaScript的新手，我想知道你是否可以创建一个允许你改变网站使用的样式表的脚本。

说：你有一个绿色的主题，一切都是绿色的阴影。您会怎样做，以便用户只需按一下按钮就可以将其更改为红色？

有谁知道如何做到这一点？

Answer 1

您可以将Id设置为链接标记，并在运行时切换css。

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

Answer 2

您可以使用CSS Variables（也称为自定义属性）进行此类更改，因为它们是supported by all modern browsers。

所以，让我们说你有一个绿色/白色的主题，绿色是主色，白色是补充它。该网站可能如下所示：

＆＃13;

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ddd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid green;
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: green;
  height: 50px;
  color: white;
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: green;
  background-color: white;
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: green;
  color: white;
}

.footer-note {
  color: green;
  background-color: white;
  padding: 3px 0;
  display: block;
}

＆＃13;

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

＆＃13;

因此，转移到CSS变量的第一步是重构将主题颜色转换为变量--primary-color和--secondary-color。以下是样式表在更改后的样子。

您可以首先将默认主题颜色设置为:root元素样式声明：

:root {
    --primary-color: green;
    --secondary-color: white;
}

然后，您可以替换硬编码＆＃34;绿色＆＃34;的所有实例在样式表中调用主要颜色变量：var(--primary-color)。因此，徽标的样式可能如下所示：

.header-logo {
  ...
  background-color: var(--primary-color);
  color: var(--secondary-color);
  ...
}

＆＃13;

:root {
  --primary-color: green;
  --secondary-color: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ddd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

＆＃13;

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

＆＃13;

现在，如果你打算改变颜色来自＆＃34;绿色＆＃34;到＆＃34; red＆＃34;，您需要做的就是将--primary-color的值更改为＆＃34;红色＆＃34;。而且，你可以使用Javascript来做到这一点！

使用普通JS，您可以使用以下颜色将颜色设置为红色：

document.body.style.setProperty("--primary-color", "red");

或者，使用jQuery，你可以做到：

$(document.body).css("--primary-color", "red");

＆＃13;

$(document.body).css("--primary-color", "red");

＆＃13;

:root {
  --primary-color: green;
  --secondary-color: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #ddd;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

＆＃13;

我更进了一步，创建了一些按钮来展示如何让用户选择一组主题颜色 - 并使用jQuery更改CSS变量值。

以下代码如何在Chrome 64上显示 - 如果您仍在使用不支持CSS变量的浏览器：

＆＃13;

$(".header--theme-button").on("click", function() {
  var primaryColor = $(this).css("--theme-primary");
  var secondaryColor = $(this).css("--theme-secondary");

  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--primary-color", primaryColor);
  $(document.body).css("--secondary-color", secondaryColor);
});

＆＃13;

:root {
  --primary-color: orange;
  --secondary-color: white;
  --theme-primary: black;
  --theme-secondary: white;
}

body {
  font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;
}

.header {
  grid-row: 1;
  grid-column: 1 / 3;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--primary-color);
}

.content {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
}

.footer {
  grid-row: 3;
  grid-column: 1 / 3;
  text-align: center;
}


/* Child items. */

.header-logo {
  float: left;
  width: 100px;
  background-color: var(--primary-color);
  height: 50px;
  color: var(--secondary-color);
  font-size: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
}

.header-settings {
  float: right;
  height: 50px;
}

.nav-links {
  list-style: none;
  margin: 5px 0 0 0;
  padding: 0;
}

.nav-links--link {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  width: 100%;
  height: 30px;
  margin: 0 0 5px 0;
  padding: 4px 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-links--link.active,
.nav-links--link:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.footer-note {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 3px 0;
  display: block;
}

.header--theme-button {
  height: 30px;
  width: 30px;
  margin: 10px 5px 0 0;
  display: inline-block;
  border-top: 15px solid var(--theme-primary);
  border-bottom: 15px solid var(--theme-secondary);
  border-right: 0;
  border-left: 0;
  padding: 0;
  box-shadow: 0 0 3px gray;
}

.header--theme-button:hover {
  box-shadow: 2px 2px 2px gray;
}

.header--theme-button.active {
  box-shadow: 3px 3px 3px gray;
}

＆＃13;

<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
    <div class="header-settings">
      <button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
          </button>
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

Answer 3

是的，您可以使用Javascript更改CSS。有关详细信息，请参阅this tutorial。它基本上链接了多个样式表：

<link rel="stylesheet" type="text/css" title="blue"
   href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
   href="http://example.com/css/pink.css">

然后使用Javascript更改它：

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

switch_style（）函数在该教程中编写。

Answer 4

如果您想在主题之间来回切换，我建议您使用以下javascript：

var count = 0

document.getElementById('trigger').onclick = function () {
    count = count + 1;
    if (count%2!=0){
      document.getElementById('default').href = 'changeTheme.css';
    } else {
      document.getElementById('default').href = 'main.css';
    }
};

然后使用前面提到的标记

Answer 5

您甚至不需要任何Javascript：

input[type=radio][value=light]:checked ~ article {
    color: #222;
    background-color: #FFEEAA;
}

input[type=radio][value=dark]:checked ~ article {
    color: #EEE;
    background-color: grey;
}

<body>
  <input type="radio" name="theme" value="light" checked="checked">Light<br>
  <input type="radio" name="theme" value="dark">Dark<br>
  <article>
    <h1>My super page!</h1>
    <p>
      Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
    </p>
  </article>
</body>

Answer 6

或者只是将主题css放在css文件中并将其传递给函数，在页面上加载if（localStorage.getItem（“ theme”）！=“”）检查主题是否已设置。一个例子：

   if (localStorage.getItem("theme") != "") {
        loadcssfile(localStorage.getItem("theme"));
      }

      function loadcssfile(filename) {
        if (filename != "") {
          localStorage.setItem("theme", filename);
        }
        
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);

        if (typeof fileref != "undefined")
          document.getElementsByTagName("head")[0].appendChild(fileref);
      }

   <div onclick="loadcssfile('css/pink.css')" id="pink">
      Pink
    </div>
    <div
      onclick="loadcssfile('css/blue.css')" id="blue">
      Blue
    </div>

如何使用CSS和JavaScript制作可更改的主题

6 个答案: