0

Hola quisiera saber como puedo cambiar los atributo de la imagen que puse,tengo una imagen, a la cual le quiero que la caja uno se le ponga el atributo a cambiar, y a la caja 2 el valor. Ejemplo. Caja1 = "backgroundcolor", y caja2="red" asi para que el usuario modifique a su antojo

function pushar2 ()
{
let div =   document.getElementById("imagen");
var caja1 = document.getElementById("caja1");
var caja2 = document.getElementById("caja2");
}

html

<!DOCTYPE html>
<html>
<head>
    <title>Examen</title>
</head>
<body id="body">
    <h1>El examen</h1>
<input type="button" name="boton" id="boton" value="puchar" onclick="puchar()">
<br>
<br>
<input type="text" name="caja1" id="caja1" placeholder="atributos">
<br>
<br>
<input type="text" name="caja2" id="caja2" placeholder="valores">
<br>
<br>
<input type="button" name="prueba" id="prueba" value="pushar2" onclick="pushar2()">
<br>
<br>
<input type="button" name="prueba" id="prueba" value="info">

<br>
<br>
<div id="imagen">
    <p></p>

</div>
</body>
<script type="text/javascript" src="funciones.js"></script>
7
  • No se entiende muy bien tu pregunta.
    – A. Cedano
    el 30 ene. 2019 a las 21:45
  • tengo una imagen, a la cual le quiero que la caja uno se le ponga el atributo a cambiar, y a la caja 2 el valor. Ejemplo. Caja1 = "backgroundcolor", y caja2="red" asi para que el usuario modifique a su antojo. el 30 ene. 2019 a las 21:48
  • Se entiende un poco mejor, pero no queda claro que son tus cajas, si son elementos que existen ya en el HTML o elementos que creas de forma dinámica. El código que muestras no indica lo que hay en tu contexto, por ejemplo si hay algún contenido HTML, el cual sería bueno que también pongas en la pregunta. No entiendo por ejemplo por qué usas createTextNode o para qué lo usas ¿?
    – A. Cedano
    el 30 ene. 2019 a las 21:54
  • "cajas" se refiere a los textbox, como textbox del atributo y textbox del valor. En cuanto lo del createTextNode se me fue, olvidé por completo que estaba ahi. el 31 ene. 2019 a las 0:05
  • Volví a editar la publicacion y el codigo, hasta el momento no sé como puedo realizar lo que quiero, solo tengo declaradas las variables. el 31 ene. 2019 a las 0:07

1 respuesta 1

0

Puedes intentar este código, el cual hará una validación de las propiedades y valores que se escriban.

Si son válidas las atribuirá al elemento, si no lo son, lanzará un alert (esa parte la puedes modificar).

Para la validación el código usa CSS.supports, si no tiene importancia para los fines del ejercicio puedes quitar la validación, la cual ocurre aquí:

 if (CSS.supports(cssStyle)) {
    imageDiv.setAttribute('style', cssStyle);
  } else {
    alert("Escribiste un atributo o propiedad erróneas");
  }

en ese caso dejaría sólo:

imageDiv.setAttribute('style', cssStyle);

Te dejo una prueba funcionando, espero te sea de utilidad.

function setCSS() {
  var propName = document.getElementById('caja1').value;
  var propValue = document.getElementById('caja2').value;
  var imageDiv = document.getElementById('imagen');
  var cssStyle = `${propName}: ${propValue}`;
  if (CSS.supports(cssStyle)) {
    imageDiv.setAttribute('style', cssStyle);
  } else {
    alert("Escribiste un atributo o propiedad erróneas");
  }
}

var punchar = setCSS;
var punchar2 = setCSS;
<input type="button" name="boton" id="boton" value="puchar" onclick="punchar()" />
<br>
<input type="text" name="caja1" id="caja1" placeholder="atributos">
<br>
<input type="text" name="caja2" id="caja2" placeholder="valores">
<br>
<input type="button" name="prueba" id="prueba2" value="pushar2" onclick="punchar2()">
<br>
<input type="button" name="prueba" id="prueba" value="info">
<hr />
<div id="imagen">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.