Javascript按钮onclick改变大小答案

【问题标题】：Javascript Button onclick change sizeJavascript按钮onclick改变大小
【发布时间】：2021-10-27 19:29:18
【问题描述】：

我的目标是更改 onClick 的背景颜色。我已经成功地做到了，但是当颜色改变时，我用来设置按钮样式的 CSS 不再适用。单击后如何保持按钮的 CSS 样式

const colors = ["blue", "green", "yellow"];
let colorIndex = -1;

function myFunction(){
  colorIndex += 1;
  if (colorIndex > colors.length-1) colorIndex = 0;
  document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;
function myyFunction(){
  colorSindex +=1;
  if (colorSindex > colors.length-1) colorSindex = 0;
  document.getElementById("btn").innerHTML = colors[colorSindex]
}

.top{
    display: flex;
    justify-content: space-around;
    border: black 1px solid;
    background-color: chartreuse;
}
.main{
    text-align: center;
    margin-top: 15%;
    border: black 1px solid;
    display: inline-block;
    position: relative;
    left: 40%;
}
button{
    cursor: pointer;
}

<div class="top">
  <ul>Colour Flipper</ul>
  <ul>Simple</ul>
  <ul>Hex</ul>
</div>
<div id="main">
  <button id="btn" onclick="myFunction();myyFunction()">
   <h1>Background Colour</h1>
  </button>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

类似的东西？

const
  btn    = document.querySelector('#btn')
, btn_H1 = document.querySelector('#btn h1')
, colors = ['blue', 'green', 'yellow']
  ;
colors.Index = -1;

btn.onclick = () =>
  {
  colors.Index = ++colors.Index      % colors.length
  let indexNext = (colors.Index + 1) % colors.length

  btn_H1.textContent                  = 'next : ' + colors[ indexNext ]
  document.body.style.backgroundColor = colors[ colors.Index ]
}

.top {
  display         : flex;
  justify-content : space-around;
  border          : black 1px solid;
  background      : chartreuse;
  }
.main {
  text-align      : center;
  margin-top      : 15%;
  border          : black 1px solid;
  display         : inline-block;
  position        : relative;
  left            : 40%;
  }
button {
  cursor          : pointer;
  }
button h1 {
  width           : 11em;
  text-align      : center;
  }

<div class="top">
  <ul>Colour Flipper</ul>
  <ul>Simple</ul>
  <ul>Hex</ul>
</div>
<div id="main">
  <button id="btn" >
   <h1>Background Colour</h1>
  </button>
</div>

【讨论】：

【解决方案2】：

问题在于，按钮中的内容最初包含在 <h1/> 元素中，但是一旦使用 JS 更新它，您只需将内容替换为纯文本，而不是包装 <h1/>。虽然您可以更新您的 JS 以包含 <h1/>，但将标题元素放入按钮对我来说似乎是可疑的——它可能被允许，但似乎令人困惑。 （更新：对于它的价值，它显示为that it is fully valid HTML to have a heading inside a button）。 相反，我只是使用<button/> 上的#btn id 来应用样式使用类似于<h1/> 浏览器默认样式的纯 CSS 对其进行处理；现在当文本更新按钮的样式保持不变：

const colors = ["blue", "green", "yellow"];
let colorIndex = -1;

function myFunction() {
  colorIndex += 1;
  if (colorIndex > colors.length - 1) colorIndex = 0;
  document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;

function myyFunction() {
  colorSindex += 1;
  if (colorSindex > colors.length - 1) colorSindex = 0;
  document.getElementById("btn").innerHTML = colors[colorSindex]
}

.top {
  display: flex;
  justify-content: space-around;
  border: black 1px solid;
  background-color: chartreuse;
}

.main {
  text-align: center;
  margin-top: 15%;
  border: black 1px solid;
  display: inline-block;
  position: relative;
  left: 40%;
}

button {
  cursor: pointer;
}

#btn {
  font-size: 2em;
  font-weight: bold;
  padding: 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colour Flipper</title>
  <link rel="stylesheet" href="colourflipper.css">
</head>

<body>
  <div class="top">
    <ul>Colour Flipper</ul>
    <ul>Simple</ul>
    <ul>Hex</ul>
  </div>
  <div id="main">
    <button id="btn" onclick="myFunction();myyFunction()">
        Background Colour
    </button>
  </div>
  <script src="colourflipper.js"></script>
</body>

</html>

在保留<h1/> 的同时，您还可以通过多种方式做到这一点；一种这样的方法是通过将行更新为document.getElementById("btn").children[0].innerHTML = colors[colorSindex] 来简单地通过id 获取您正在获取的元素的第一个子元素：

const colors = ["blue", "green", "yellow"];
let colorIndex = -1;

function myFunction() {
  colorIndex += 1;
  if (colorIndex > colors.length - 1) colorIndex = 0;
  document.body.style.backgroundColor = colors[colorIndex]
}
let colorSindex = -1;

function myyFunction() {
  colorSindex += 1;
  if (colorSindex > colors.length - 1) colorSindex = 0;
  document.getElementById("btn").children[0].innerHTML = colors[colorSindex]
}

.top {
  display: flex;
  justify-content: space-around;
  border: black 1px solid;
  background-color: chartreuse;
}

.main {
  text-align: center;
  margin-top: 15%;
  border: black 1px solid;
  display: inline-block;
  position: relative;
  left: 40%;
}

button {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colour Flipper</title>
  <link rel="stylesheet" href="colourflipper.css">
</head>

<body>
  <div class="top">
    <ul>Colour Flipper</ul>
    <ul>Simple</ul>
    <ul>Hex</ul>
  </div>
  <div id="main">
    <button id="btn" onclick="myFunction();myyFunction()">
        <h1>Background Colour</h1>
    </button>
  </div>
  <script src="colourflipper.js"></script>
</body>

</html>

这不是唯一的方法——最好将<h1/> 提供给它自己的 id 用于从 DOM 中查询它。

【讨论】：

嗨，亚历山大，感谢您的帮助。只是这样我就可以理解它了，请您解释一下我将如何更新 Javascript 以包含
@goosey9 - 更新了如何使用 JS 保留 <h1/>。
嘿，Alexander，如果我想让按钮的“背景颜色”和“红色”大小相同，例如，我该怎么做？我已经尝试改变 main 和 btn 的宽度，但如果有意义的话，它会创建一个新框和一个较小的框
您可以使用我在第一个 sn-p 中展示的基于 CSS 的方法，并在针对按钮文本的样式块中设置固定的按钮宽度。 @MisterJojo 的 This answer 提供了这种方法的工作示例。