Question

我试图在单击按钮 1 后将按钮 2 更改为手指指针所以我想知道有没有办法做到这一点，如果有请告诉我我写什么代码注意：按钮 1 已经是一个手指指针我希望按钮 2 在单击按钮 1 后成为一个手指指针这是我的代码：

<input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;"value="first button" onclick="enableButton2()" /> 
<input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;"value="second button" disabled />

Answer 1

使用它：

<script>
       function enableButton2(){
           var btn2 = document.getElementById('button2');
           btn2.setAttribute('disabled', false)
           btn2.style.cursor = 'pointer'
       }
   </script>
   
   <input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;" value="first button" onclick="enableButton2()" /> 
    <input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;" value="second button" disabled="true" />

Answer 2

这样：

您要查找的 css 样式是 cursor : not-allowed;

const bt_1 = document.getElementById('button1')
  ,   bt_2 = document.getElementById('button2')
  ;
bt_1.onclick = () =>
  {
  bt_2.disabled = false
  }

button {
  cursor        : pointer; 
  height        : 45px; 
  border-radius : 10px;    
  color         : red;
  }
button[disabled] {
  cursor           : not-allowed;
  pointer-events   : none;
  color            : #c0c0c0;
  background-color : #ffffff !important;
  }
#button1 {
  background-color : black;
  width            : 150px; 
  }
#button2 {
  background-color : yellow; 
  width            : 225px;
  }

<button id="button1" type="submit" > first button  </button>
<button id="button2"   disabled    > second button </button>

单击另一个按钮后如何设置按钮样式？

2 个答案: