Tema: leyendo propiedad de style
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 22/12/2016, 14:32
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 5 meses
Puntos: 86
Respuesta: leyendo propiedad de style
En mi opinión la manera de hacerlo es con la propiedad classList, el método toggle() y la especifidad en el css
Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8.             #c1 {position:absolute;left:200px;top:100px;width:100px;border:1px solid #000000;padding:10px;visibility:hidden;}
  9.             div#c1.mostrar {visibility:visible;}
  10.         </style>
  11.         <script>
  12.             function ver(id) {
  13.                 document.getElementById(id).classList.toggle('mostrar');
  14.             }
  15.         </script>
  16.     </head>
  17.     <body>
  18.  
  19.         <button onclick="ver('c1')">capa on/off</button>
  20.         <div id="c1">Esta es la capa</div>
  21.         
  22.     </body>
  23. </html>
Como la propiedad classList no es soportada por <=IE9 se puede hacer un pequeño polyfill
Código Javascript: 
Ver original
  1. if (!('classList' in document.documentElement)) { // IE9, OPERA MINI, ANDROID (2.1 - 2.3), UC BROWSER
  2.  
  3.     Object.defineProperty(Element.prototype, 'classList', {
  4.  
  5.         get: function() {
  6.  
  7.             return {
  8.  
  9.                 elemento: this,
  10.                 selectores: (this.className != null) ? this.className.replace(/^\s+|\s+$/g, '').split(/\s+/g) : [],
  11.                 indice: null,
  12.  
  13.                 toggle: function(selector) {
  14.  
  15.                     this.indice = this.selectores.indexOf(selector);
  16.                     ~this.indice ? this.selectores.splice(this.indice, 1) : this.selectores.push(selector);
  17.                     this.elemento.className = this.selectores.join(' ');
  18.  
  19.                 },
  20.  
  21.                 add: function(selector) {
  22.  
  23.                     this.indice = this.selectores.indexOf(selector);
  24.                     ~this.indice ? '' : this.selectores.push(selector);
  25.                     this.elemento.className = this.selectores.join(' ');
  26.                 },
  27.  
  28.                 remove : function(selector) {
  29.  
  30.                     this.indice = this.selectores.indexOf(selector);
  31.                     ~this.indice ? this.selectores.splice(this.indice, 1) : '';
  32.                     this.elemento.className = this.selectores.join(' ');
  33.                 }
  34.             }
  35.         },
  36.  
  37.         configurable: true,
  38.         writeable: false
  39.     });
  40. }
Si se presta atención, el objeto se genera cada vez que la propiedad es llamada. Aún no he logrado que se genere una sola vez y que luego retorne el objeto generado