Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

317
Vistas
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 Respuestas
Responde la pregunta

0

in javascript you can make but please describe more

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

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda