E - Cambiar clases

ejercicio En este ejercicio utilizo el método classList.toggle() para poner/quitar una clase en una imagen. Además he añadido un botón para ver como podemos cambiar una imagen comprobando si existe otra antes, para esto utilizo la función search() que me permite buscar una cadena dentro de otra, en este ejemplo busco dentro de un atributo HTML.

 

Código JavaScript



// ========================================
//  Código JavaScript
//  CAMBIANDO CLASES
//  (cc) 2017, 3con14.pro
// ========================================

function Girar(){
  var img = document.getElementById('imagen');
  img.classList.toggle('gira');
}
function Cambiar(){
  var img = document.getElementById('imagen');
  var mostrar = img.src.search('sam');
  if (mostrar == '-1') {
    img.src = 'img/sam.png';
  } else {
    img.src = 'img/iph.png';
  }
}

Código HTML



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Telefono</title>
    <link rel="stylesheet" href="/css/estilos_js.css">
    <script src="/js/codigo.js"></script>
</head>
<body>
    <button onclick="Girar()" class="boton">Girar</button>
    <button onclick="Cambiar()" class="boton b2">Cambiar</button>
    <div class="caja gira1">
        <img id="imagen" src="/img/sam.png">
    </div>
</body>
</html>

Reglas CSS

El código CSS es el mismo que tienes en otros ejercicios, salvo ligerísimos cambios, de manera que no es necesario repetirlo aquí.



/* -------------------------------
    CSS para ejemplos JavaScript
    CAMBIANDO CLASES
    (cc) 3con14, 2017
   ------------------------------- */

* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 1s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  max-width        : 100vw;
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  background-color : rgba(0, 0, 0, 0.75);
}
.caja {
  width  : 25vw;
  margin : auto;
}
img {
  max-width : 100%;
  height    : auto;
  filter    : drop-shadow(5px 5px 10px rgba(0,0,0,1));
}
.gira {
  transform: rotate(-90deg);
}
.boton {
  position      : absolute;
  top           : 10px;
  left          : 10px;
  width         : 65px;
  height        : 65px;
  cursor        : pointer;
  border-radius : 50%;
  box-shadow    : 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
  transition    : all 0.2s ease-in;
}
.boton:hover { background-color: rgba(255, 0, 0, 0.5); }
.b2 { left: 80px; }


Demo

telefono

 

Etiquetas: JavaScript, Ejercicio

Visitas...

Hoy ........ 0

Ayer ....... 0

Mes ........ 72

Total ........ 5726

En línea...

Hay 7 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS