我能夠更改文本的顏色，但我無法理解如何更改p標簽的背景顏色。如果有人可以請讓我知道鋤頭去做。下面是我的HTML和JS代碼。
function button(){
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.body.style.color = 'red';
});
}
button();<style>
p{
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}
</style>
<p>Welcome To My Domain</p>
<button id="btn">Button</button>uj5u.com熱心網友回復：
您可以向 p 標簽添加一個類，然后在事件偵聽器中查詢它并設定其樣式屬性，document.querySelector('.classname').style.backgroundColor = 'somecolor'
function button() {
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.body.style.color = 'red';
document.querySelector('.welcome').style.backgroundColor = 'black';
});
}
button();<style>
p {
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}
</style>
<p class="welcome">Welcome To My Domain</p>
<button id="btn">Button</button>另一種方法是切換一個為您設定元素樣式的類。通過這個例子，在你的 CSS 中添加類和樣式，然后在 javascript 中使用 classList 來切換類。
document.querySelector('.className').classList.toggle('someclass')
function button() {
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.querySelector('.welcome').classList.toggle('instance-change')
});
}
button();.instance-change {
color: red;
background-color: black;
}
p {
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}<p class="welcome">Welcome To My Domain</p>
<button id="btn">Button</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/514352.html
標籤：htmlcss表现