How to change a div border color when clicked?-CodePudding

Working on a react/typescript project, I have a div and want to replace the border color and width of a div when it's clicked:

   <div
          className="showroom-card "
          onClick={() => setSelection({ showroom: 'Westchester' })}
        >

I know it should be simple but I'm pretty new to this.

CodePudding user response：

in javascript you can make but please describe more

div.style.border="1px solid #000";

CodePudding user response：

.showroom-card {
  width: 500px;
  height: 300px;
  background-color: yellow;
  border: 2px solid red;
}

.selected {
  border: 2px solid black;
}

  <div
    id="card1"
    
    onClick="(function(divId) {
      targetDiv = document.querySelector(`#${divId}`)
      targetDiv.classList.toggle('selected') 
    })('card1');return false;"
  ></div>