ボタンをクリックしたときにJavaScriptのCSSスタイルを変更するが、別のボタンを押したときにオリジナルに戻る

カーソルのイメージを含むボタンをクリックしたHTMLページには、そのカーソルがある：ボタンをクリックしたときにJavaScriptの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ボーダー。どうすれば1つのボタン（最近押されたボタン）だけが3pxの境界線を持つようにすることができますか？私はI want to change the style of all sibling elementsを試してみましたが、これは1を除いて同じ名前のクラスを使用しますが、私はIDを使用していますし、それらはすべて異なって命名され、そして私はあなたが仕事にこれを変更する方法を考え出すことはできません

EDIT
。

出典

2017-06-11 Henry

一言で言えば可能な二重に私の考えです/ questions/5012655/i-want-to-all-all-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にします。

ボタンをクリックすると、アクティブなクラスをボタンから別のボタンに切り替えるだけで済みます。ここで

は、[私はすべての兄弟要素のスタイルを変更したい]（https://stackoverflow.comの

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

ボタンをクリックしたときにJavaScriptのCSSスタイルを変更するが、別のボタンを押したときにオリジナルに戻る

答えて

関連する問題