Question

你好我现在在网站上工作有一些困难，我希望有10种预设颜色方案，只需点击一个图标就可以交换它们，而不是写10X的功能我宁愿做一次，每次带有链接的图标只会发送我尝试不起作用的参数，任何关于我做错的指示都会受到赞赏

对函数的调用

<button type="button" onclick="themeOne(#D3649F,#000000,#666666)">Theme 1</button>

现在为功能

function themeOne(p1,p2,p3) {

    var links = document.getElementById('slidebar').getElementsByTagName('a');

    for (var i = 0; i < links.length; i++) {
        links[i].style.color = p1;
    }


    var glyph = document.querySelectorAll(".blue");

    for (var i = 0; i < glyph.length; i++) {
        glyph[i].style.color = p1;
    }

    document.body.style.backgroundColor = p3;
    document.getElementById("navbar").style.backgroundColor = p2;
    document.getElementById("navbar2").style.backgroundColor = p2;
    document.getElementById("slidebar").style.backgroundColor = p2;
    document.getElementById("page-content").style.color = "#FFFFFF";
}

我关注的是我传递给变量的内容，因为我不确定＆＃34;＃＆＃39;被认为是一个int或者我需要做一些事情，比如发送数字并跟进类似的事情：

document.body.style.backgroundColor = "#" + p3;

Answer 1

您应该将参数作为字符串传递。这会导致更改以下内容：

<button type="button" onclick="themeOne('#D3649F', '#000000','#666666')">Theme 1</button>

Answer 2

打开您的控制台并在其中输入0xD3649F。您将看到输出13853855，这并不是特别特别。它转换为一个简单的数字，就像您直接编写13853855一样。

您可以将数字转换为十六进制字符串，但是更方便的是简单地将传递给themeOne的十六进制值括在引号中，换句话说，如下所示：

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button>

这是一个字符串当然，但就像宽度值通常包含单位并要求值为字符串（即'150px'而不是数字150）一样，分配是完全可以接受的一个十六进制数字的字符串，用于颜色值。

Answer 3

您相信您需要将颜色作为字符串......就像您的函数一样：

document.getElementById("page-content").style.color = "#FFFFFF"

所以：

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button>

可能就是答案？

更新：是的，我测试了它，这个修改有效。

Answer 4

你应该使用css而不是通过javascript ...

您应该仅使用Javascript从一个主题切换到另一个主题... 这是一个例子：

＆＃13;

function themeCtrl($) {
  var select = $('#themeCtrl');
  var container = $('#container');
  
  var theme = 'theme-' + select.val();
  
  select.change(function() {
    var _theme = 'theme-' + select.val();
    
    container.removeClass(theme).addClass(_theme);
  });
}

jQuery(document).ready(themeCtrl);

＆＃13;

.theme-default .text-success { color: green; }
.theme-default .text-error { color: red; }
.theme-default .text-danger { color: orange; }
.theme-default .text-info { color: cyan; }

.theme-inverted .text-success { color: red; }
.theme-inverted .text-error { color: green; }
.theme-inverted .text-danger { color: cyan; }
.theme-inverted .text-info { color: orange; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="themeCtrl">
  <option selected value="default">Default</option>
  <option value="inverted">Inverted</option>
</select>
<hr />

<div class="theme-default" id="container">
  <div class="text-success">TEXT SUCCESS</div>
  <div class="text-error">TEXT ERROR</div>
  <div class="text-danger">TEXT DANGER</div>
  <div class="text-info">TEXT INFO</div>
</div>

＆＃13;

尝试将Color Hex作为参数传递到JavaScript

4 个答案: