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。

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

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>

希望有帮助。

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

1 个答案: