Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

314
Visualizações
How to change a div border color when clicked?

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' })}
        >

enter image description here

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

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

in javascript you can make but please describe more

div.style.border="1px solid #000";
about 4 years ago · Juan Pablo Isaza Relatório

0

With pure html/js it would be look like that:

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

.selected {
  border: 2px solid black;
}
  <div
    id="card1"
    class="showroom-card"
    onClick="(function(divId) {
      targetDiv = document.querySelector(`#${divId}`)
      targetDiv.classList.toggle('selected') 
    })('card1');return false;"
  ></div>

But in react you must use state of component to manipulate div's style. For example, you would use divToggled variable in state of your component to render border and manipulate its color. The handler function, named handleDivClick change state and component will be rerendered:

class YourComponent extends React.Component {
  ...
  handleDivClick = () => {
    this.setState(divToggled: !this.state.divToggled)
  }

  ...
  render() {
    return (
      <div
        onClick={this.handleDivClick}
        className={`showroom-card ${this.state.divToggled ? 'selected' : ''}`}
      />
    )
  }
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda