如何为'string' JavaScript 设置颜色

我希望能够为颜色名称设置颜色，因此，如果用户输入字符串'green''颜色将是一种特殊的绿色，例如＃34ff8b。

我已经尝试使用变量并将颜色设置为"绿色"字符串，但这不是有效的JS。

所需的结果：用户输入颜色名称"绿色"，JavaScript使用JS代码中的特殊颜色集。

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');
myButton.addEventListener('click', () => {
  myHeading.style.color = myTextInput.value;
} );

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #1ad777;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

您需要将支持的颜色存储在对象或数组中。

const colors = {
    green: '#34ff8b',
    red: '#someColorValue'
}

然后，当您设置myHeading的样式时，您可以说：

myHeading.style.color = colors[myTextInput.value];

可以访问颜色对象并拔出您预先设置的值。

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');
const colors = {
  green: 'green',
  blue: 'blue',
  red: 'red'
}
myButton.addEventListener('click', () => {
  myHeading.style.color = colors[myTextInput.value];
} );

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #1ad777;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

myButton.addEventListener('click', () => {
  if(myTextInput.value == 'green') {
    myHeading.style.color = "#34ff8b";
  } else {
    myHeading.style.color = myTextInput.value;
  }
} );

简单的解决方案，其他答案也正确。

https://jsfiddle.net/cuchu/ownfby70/

您的代码很好，但是您需要以某种方式验证输入。您可以做这样的事情。

const myButton = document.getElementById('myButton');
const myHeading = document.getElementById('myHeading');
const myTextInput = document.getElementById('myTextInput');
myButton.addEventListener('click', () => {
  var input = myTextInput.value,
      validator = /green|red/; /* you can refine this regex to better suit your needs. */
  
  if (validator.test(input)) {
      myHeading.style.color = input;
  }
} );

<button id="myButton">Color</button>
<h1 id="myHeading">Heading</h1>
<input id="myTextInput" type="text" name="myTextInput" value="">

相关内容

最新更新

热门标签：