我试图创建一个网页，其中有三个工作按钮被标记为"红色"， "绿色"one_answers"蓝色"。当用户点击其中一个按钮时，整个网页应该改变为被点击的特定按钮的颜色。
这是我到目前为止所做的，但我很确定我做错了什么:
function myFunction() {
document.getElementById("H1").style.color = "#ff0000";
}<h1 id="H1">H1</h1>
<button type="button" onclick="myFunction()">Set H1 to Red</button>我们首先在表单标记中创建三个名为红色、绿色和蓝色的单选按钮，并使用名为on Click and assign value document的属性。Bgcolor =颜色名称
这里只有一个问题，你改变了颜色，但你想改变背景色。
希望这对你有帮助。
function myFunction() {
document.body.style.backgroundColor = "#ff0000";
}
onClick the button will invoke the changeColor function which will take the innerText
of the button as style value and set it as background color of the body.
function changeColor (element){
document.body.style.backgroundColor = element.innerText
}
console.log(document.body.style.backgroundColor)<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="changeColor(this)" >Red</button>
<button onclick="changeColor(this)" >Green</button>
<button onclick="changeColor(this)" >Blue</button>
</body>
</html>您也可以使用类或id选择器来选择元素，而不是使用标签名称。
const element = document.getElementsByClassName(".class")
在这种情况下，元素将是具有相同类的节点数组。你可以使用forEach循环来触发所有的颜色变化。
，如果目标是单个元素，则使用Id。
const element = document.getElementById("id")
你也可以使用onclick事件监听器来改变颜色。
首先是"问题"我不相信这是问题，因为点击<button>做的正是<button>所说的——在它的文本中——它会做的。然而:
function myFunction() {
// as the button-text implies this JavaScript retrieves
// the element with the id of 'H1', and updates its
// CSS - via the inline style element - to the colour
// of '#ff0000' (or '#f00'), which is red.
document.getElementById("H1").style.color = "#ff0000";
}
<h1 id="H1">H1</h1>
<!-- Obviously you know that this element is intended to set
the colour of the <h1> element, given the text of the
<button>; also you're using an inline event-handler
(the 'onclick' attribute) to bind a function to an event,
which is considered bad practice due to the obtrusive
nature of the event-binding, and difficulty of updating
function calls: -->
<button type="button" onclick="myFunction()">Set H1 to Red</button>
按照您的要求，而不是设置给定元素的background-color，我们必须:
- 在JavaScript中检索元素，
- 更新正确的-
background-color-属性 - 找到
<button>可以"沟通"的方法。该属性必须设置的正确值，理想情况下 - 使用不显眼的JavaScript将函数绑定到'click'事件。
// assigning a meaningful name to the function
// in order to make future maintenance easier:
function setBackgroundColor(evt) {
// retrieving the element we wish to style:
const body = document.querySelector('body')
// accessing the style interface, and
// updating the background-color, via the
// JavaScript camelCased property-name:
body.style.backgroundColor = evt.currentTarget.value;
}
// retrieving the <button> elements:
const buttons = document.querySelectorAll('button');
// iterating over that NodeList of <button>
// elements, using NodeList.prototype.forEach():
buttons.forEach(
// using an Arrow function, passing in a reference
// to the current Node of the NodeList over which
// we're iterating. Here we use the
// EventTarget.addEventListener() method to bind the
// setBackgroundColor() functiona as the 'click'
// event-handler when the node is clicked (also fired
// on keyboard navigation if the user hits spacebar
// or enter):
(node) => node.addEventListener('click', setBackgroundColor)
)<h1 id="H1">H1</h1>
<!-- here we're adding a "value" attribute to hold
the colour to set; we're using a colour-name
('red'), a hexadecimal ('#87cefa'), and
a hsl() ('120deg 93% 80%') value as the colour: -->
<button type="button" value="red">Red</button>
<button type="button" value="#87cefa">Blue</button>
<button type="button" value="hsl(120deg 93% 80%)">Red</button>当然，还有另一种选择，那就是使用颜色选择器<input>，它允许用户选择他们选择的任何颜色，并简单地将选择的值传递给函数:
// assigning a meaningful name to the function
// in order to make future maintenance easier:
function setBackgroundColor(chosenColor) {
// caching the <body> element:
const body = document.querySelector('body');
// updating the background-color via the
// 'style' interface:
body.style.backgroundColor = chosenColor;
}
// retrieving the <input> element with a type-attribute
// equal to "color":
const input = document.querySelector('input[type=color]');
// using EventTarget.addEventListener() to use the anonymous
// function to call the setBackgroundColor() function, passing
// the value of the evt.currentTarget node (the color <input>)
// as the argument:
input.addEventListener('change', (evt)=> setBackgroundColor(evt.currentTarget.value));<h1 id="H1">H1</h1>
<input type="color">引用:
- 箭头功能。
CSSStyleDeclaration.document.querySelector().document.querySelectorAll().EventTarget.addEventListener().