Skip to main content
se eliminaron 2 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Lo que obtienes al extraer el estilo del elemento es un String por lo que tanto al compararlo, como al asignarle valor, debes de hacerlo a través de un String.

Hay que considerar también que el formato en el que te es devuelto el color mete un espacio después de cada coma, por lo que en tu comparación se tiene que ver contemplado.

function changeColor(id) {
  const el = document.getElementById('p')
  
  if (el.style.color === 'rgb(0, 255, 0)') {
    el.style.color = 'rgb(255, 0, 0)'
  }
  else{
    el.style.color = 'rgb(0, 255, 0)'
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí

Lo que obtienes al extraer el estilo del elemento es un String por lo que tanto al compararlo, como al asignarle valor, debes de hacerlo a través de un String.

Hay que considerar también que el formato en el que te es devuelto el color mete un espacio después de cada coma, por lo que en tu comparación se tiene que ver contemplado.

function changeColor(id) {
  const el = document.getElementById('p')
  
  if (el.style.color === 'rgb(0, 255, 0)') {
    el.style.color = 'rgb(255, 0, 0)'
  }
  else{
    el.style.color = 'rgb(0, 255, 0)'
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí

Lo que obtienes al extraer el estilo del elemento es un String por lo que tanto al compararlo, como al asignarle valor, debes de hacerlo a través de un String.

Hay que considerar también que el formato en el que te es devuelto el color mete un espacio después de cada coma, por lo que en tu comparación se tiene que ver contemplado.

function changeColor() {
  const el = document.getElementById('p')
  
  if (el.style.color === 'rgb(0, 255, 0)') {
    el.style.color = 'rgb(255, 0, 0)'
  }
  else{
    el.style.color = 'rgb(0, 255, 0)'
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí

Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Lo que obtienes al extraer el estilo del elemento es un String por lo que tanto al compararlo, como al asignarle valor, debes de hacerlo a través de un String.

Hay que considerar también que el formato en el que te es devuelto el color mete un espacio después de cada coma, por lo que en tu comparación se tiene que ver contemplado.

function changeColor(id) {
  const el = document.getElementById('p')
  
  if (el.style.color === 'rgb(0, 255, 0)') {
    el.style.color = 'rgb(255, 0, 0)'
  }
  else{
    el.style.color = 'rgb(0, 255, 0)'
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí