han*_*eed 1 html javascript css
我希望能够为颜色名称设置颜色,因此如果用户输入字符串"green",颜色将是特殊的绿色,如#34ff8b.
我已经尝试使用变量并将颜色设置为字符串'green',但这不是有效的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];
这将访问colors对象并拉出您预先设置的值.
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>| 归档时间： |
|
| 查看次数： |
120 次 |
| 最近记录： |