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

Trying to pass Color Hex as parameters in JavaScript

本文关键字：Hex 参数传递 Color 中将 JavaScript      更新时间：2023-09-26

你好所以我目前在网站上工作时遇到了一些困难，我想有 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";
}
我

担心的是我传递给变量的内容，因为我不确定"#"是否被视为整数，或者我是否需要做一些事情，例如仅发送数字并跟进以下内容：

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

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

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

打开主机并在其中输入0xD3649F。 你会看到输出13853855没有什么特别的。 它转换为一个简单的数字，就好像您直接写13853855一样。

您可以将数字转换为十六进制字符串，但更方便的做法是简单地将传递给themeOne的十六进制值用引号括起来，换句话说：

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

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

嗨，

相信你需要把颜色当作字符串......就像在你的函数中一样：

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

所以： 

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

也许是答案？

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

你应该使用css，而不是通过javascript来做到这一点。

你应该只使用Javascript从一个主题切换到另一个主题......下面是一个示例：

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);
.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; }
<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>

相关文章：