更改CSS樣式，當按鈕被點擊，但改回原來當另一按鈕被按下

我有一個網頁，單擊用光標和整個HTML主體的圖像的按鈕有光標：更改CSS樣式，當按鈕被點擊，但改回原來當另一按鈕被按下

<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和他們都不同的名稱，我不能工作了，你會如何改變工作。

來源

2017-06-11 Henry

的[我要改變所有兄弟元素的風格]可能的複製（https://stackoverflow.com/questions/5012655/i-want-to-change-the-style-all-sibling-elements） – OneNeptune

@Henry你看我的解決方案嗎？ –

你可以把以前的值和當前值的引用，這樣做：

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; 
 
}

<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>

來源

2017-06-11 19:37:56

我該如何改變它的默認值？例如，如果我希望別名是默認的，所以它在加載頁面時將具有3px邊框，但在另一個按鈕被按下時仍會改變， – Henry

@Henry在這種情況下，您應該能夠比較單擊按鈕的ID。如果點擊的按鈕的ID與上一個ID不同，那麼你就知道該怎麼做！ –

你會怎麼做？ – Henry

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"); 
 
});

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

 
body.active { 
 
    cursor: pointer; 
 
}

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

來源

2017-06-11 19:15:10

我建議不同的方法。

首先給每個按鈕添加一個類（即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){ 
 
    \t //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>

感謝

來源

2017-06-11 19:46:36 Obie

更改CSS樣式，當按鈕被點擊，但改回原來當另一按鈕被按下

回答

相關問題