javascript - 存储十六进制 HTML 颜色作为数值转换返回不同的颜色

Question

我试过解决方案是这个 post但这似乎对我没有帮助。我必须将十六进制颜色存储到数字中并能够成功地将其转换回十六进制颜色

我在下面放了一个工作代码

hexToNum = () => {
  const orignalColor = '#00FF7B';
  const newStr = orignalColor.replace('#', '');
  document.querySelector('#num').value = parseInt(newStr, 16);;
}

NumToHex = () => {
  const el = document.querySelector('#str');
  const num = el.value;
  const str1 = num.toString(16);
  console.log(str1);
  el.style.borderColor = '#' + str1;
  el.style.backgroundColor = '#' + str1;
}

.color1 {
  border-radius: 50%;
  width: 21px;
  height: 21px;
  border: 3px solid;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13);
  border-color: #00FF7B;
  background-color: #00FF7B;
}

.color2 {
  border-radius: 50%;
  width: 21px;
  height: 21px;
  border: 3px solid;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13);
}

<div class='color1'></div>

<br/>
<button onclick="hexToNum()">Get Numeric Value </button> <input type='text' id='num'>


<br/><br/><br/>
<div class='color2'></div>

<br/><br/>
<input type='text' id='str'>
<button onclick="NumToHex()">Set Color From Numeric Value </button>

Answer 1

正如@reporter 之前注意到的，input 值为string。

因此您必须使用 parseInt 或其他方法将其转换为 number，例如

const num = +el.value;

然后转换为十六进制并用 0 左填充结果:

const str1 = num.toString(16).padStart(6, '0');

请看下面的片段:

hexToNum = () => {
  const orignalColor = '#00FF7B';
  const newStr = orignalColor.replace('#', '');
  document.querySelector('#num').value = parseInt(newStr, 16);;
}

NumToHex = () => {
  const el = document.querySelector('#str');
  const num = +el.value;
  const str1 = num.toString(16).padStart(6, '0');
  console.log(str1);
  const c2 = document.querySelector('.color2')
  c2.style.borderColor = '#' + str1;
  c2.style.backgroundColor = '#' + str1;
}

.color1 {
  border-radius: 50%;
  width: 21px;
  height: 21px;
  border: 3px solid;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13);
  border-color: #00FF7B;
  background-color: #00FF7B;
}

.color2 {
  border-radius: 50%;
  width: 21px;
  height: 21px;
  border: 3px solid;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13);
}

<div class='color1'></div>

<br/>
<button onclick="hexToNum()">Get Numeric Value </button> <input type='text' id='num'>


<br/><br/><br/>
<div class='color2'></div>

<br/><br/>
<input type='text' id='str'>
<button onclick="NumToHex()">Set Color From Numeric Value </button>

希望对您有所帮助。