Question

我有一个网页，您点击一个带有光标图像的按钮，整个HTML正文都有该光标：

<table>
    <tr>
        <td><button id="alias" onclick="cur('alias')"><img src="alais.png"/>
        </button></td>
        <td><button id="cell" onclick="cur('cell')"><img src="cell.png"/>
        </button></td>
        <td><button id="col-resize" onclick="cur('col-resize')"><img src="col-
        resize.png"/>
        </button></td>
    </tr>
    ...
</table>

所有按钮都有1px solid black边框这是JavaScript函数：

function cur(curval){
    document.getElementById(curval).style.borderWidth ="3px"
    document.body.style.cursor = curval;
}

这是显示选择了哪个按钮，但是当您按下另一个按钮时，前一个按钮会保留3px边框。我怎么能这样做只有一个按钮（最近按下的按钮）有3px边框？

修改的
我已经尝试了I want to change the style of all sibling elements但是这使用了除了一个名称相同的类，但我使用的是ID，并且它们的名称都不同，我无法解决如何将其更改为有效的方法。

Answer 1

您可以保留对先前值和当前值的引用，并执行以下操作：

＆＃13;

var prevElement, currentElement;

function cur(curval) {
  if (!prevElement) {
    prevElement = document.getElementById(curval);
    currentElement = prevElement;
  } else {
    prevElement = currentElement;
    prevElement.style.borderWidth = "1px"
    currentElement = document.getElementById(curval);

  }
  currentElement.style.borderWidth = "3px"
  document.body.style.cursor = curval;
}

＆＃13;

<table>
  <tr>
    <td>
      <button id="alias" onclick="cur('alias')">
                    <img src="alais.png" />
                </button>
    </td>
    <td>
      <button id="cell" onclick="cur('cell')">
                    <img src="cell.png" />
                </button>
    </td>
    <td>
      <button id="col-resize" onclick="cur('col-resize')">
                    <img src="col-
        resize.png" />
                </button>
    </td>
  </tr>

</table>

＆＃13;

Answer 2

我建议采用不同的方法。

首先，为每个按钮添加一个类（即control-btn）并为该类定义css。然后定义另一个活动类并使其边框宽度为3px。

因此，当您单击按钮时，您只需将活动类从一个按钮切换到另一个按钮。

这是我的想法，简而言之

function cur(curval){
    //find active btn first
    var active_btn = document.querySelector('.control-btn.active');
    
    //if any active btn
    if(active_btn){
    	//remove active class from it 
      active_btn.classList.remove('active');
    }
    
    //now add active class to selected button
    document.getElementById(curval).classList.add('active');
    document.body.style.cursor = curval;
}

.control-btn{
  border:1px solid black;
}

.control-btn.active{
  border-width: 3px;
}

<table>
    <tr>
        <td><button class="control-btn" id="alias" onclick="cur('alias')"><img src="http://placehold.it/100x100?text=alias"/>
        </button></td>
        <td><button class="control-btn" id="cell" onclick="cur('cell')"><img src="http://placehold.it/100x100?text=ceil"/>
        </button></td>
        <td><button class="control-btn" id="col-resize" onclick="cur('col-resize')"><img src="http://placehold.it/100x100?text=resize"/>
        </button></td>
    </tr>
</table>

谢谢

Answer 3

＆＃13;

var body = document.body;
var reset = document.getElementById("reset");
var button = document.getElementById("button");

button.addEventListener("click", function() {
  body.classList.add("active");
});

reset.addEventListener("click", function() {
  body.classList.remove("active");
});

＆＃13;

body {
  height: calc(100vh - 120px);
  cursor: default;
}

body.active {
  cursor: pointer;
}

＆＃13;

<body>
  <button id="button">Click Me</button>
  <button id="reset">Reset</button>
</body>

＆＃13;

单击按钮时在JavaScript中更改CSS样式，但在按下另一个按钮时更改回原始样式

3 个答案: