[SOLUCIONADO] leyendo propiedad de style

alfa18 · #1 (**permalink**) 22/12/2016, 06:24

Hola amigos,
tengo este codigo, que aunque funciona no lo hace como debería¿Alguien me puede decir el problema?

Código Javascript:

Ver original<style>
#c1 {position:absolute;left:200px;top:100px;width:100px;border:1px solid #000000;padding:10px;visibility:hidden;}
</style>
<script>
function ver(id) {
var x=document.getElementById(id).style;
x.visibility=(x.visibility=='hidden')?'visible':'hidden';
}
</script>
<button onclick="ver('c1')">capa on/off</button>
<div id="c1">Esta es la capa</div>

El problema es que (al principio)la propiedad visibility no coge su valor del objeto style(es una cadena vacia ''), a partir del 2º click en el boton si lee el valor de la propiedad

Alexis88 · #2 (**permalink**) 22/12/2016, 09:30

Lo que sucede es que tú defines el valor de la propiedad visibility en la hoja de estilos y pretendes leerlo desde el objeto style el cual solo es capaz de obtener los valores declarados in line, por ejemplo:

Código HTML:

Ver original<div style="visibility: hidden"></div>

Es preferible utilizar el objeto-propiedad style para establecer valores y no para leerlos. En su lugar, debes utilizar el método .getComputedStyle:

Código Javascript:

Ver originalvar visibilidad = getComputedStyle(document.getElementById("c1")).visibility;

Y para navegadores antiguos, como las viejas versiones de Internet Explorer, debes utilizar el método .currentStyle():

Código Javascript:

Ver originalvar visibilidad = document.getElementById("c1").currentStyle.visibility;

alfa18 · #3 (**permalink**) 22/12/2016, 10:06

Supongo que la mejor solucion es combinar hoja y estilo en linea

Código Javascript:

Ver original<style>
#c1 {position:absolute;left:200px;top:100px;width:100px;border:1px solid #000000;padding:10px}
</style>
............
.-..............
<div id="c1" style="visibility:hidden">Esta es la capa</div>

Gracias Alexis88

Alexis88 · #4 (**permalink**) 22/12/2016, 11:17

En realidad, lo que se aconseja actualmente es definir los estilos solo en la hoja de estilos. Hacerlo in line es una vieja práctica desaconsejada por su poca practicidad.

mpozo · #5 (**permalink**) 22/12/2016, 14:32

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<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            #c1 {position:absolute;left:200px;top:100px;width:100px;border:1px solid #000000;padding:10px;visibility:hidden;}
            div#c1.mostrar {visibility:visible;}
        </style>
        <script>
            function ver(id) {
                document.getElementById(id).classList.toggle('mostrar');
            }
        </script>
    </head>
    <body>
 
        <button onclick="ver('c1')">capa on/off</button>
        <div id="c1">Esta es la capa</div>
        
    </body>
</html>

Como la propiedad classList no es soportada por <=IE9 se puede hacer un pequeño polyfill

Código Javascript:

Ver originalif (!('classList' in document.documentElement)) { // IE9, OPERA MINI, ANDROID (2.1 - 2.3), UC BROWSER
 
    Object.defineProperty(Element.prototype, 'classList', {
 
        get: function() {
 
            return {
 
                elemento: this,
                selectores: (this.className != null) ? this.className.replace(/^\s+|\s+$/g, '').split(/\s+/g) : [],
                indice: null,
 
                toggle: function(selector) {
 
                    this.indice = this.selectores.indexOf(selector);
                    ~this.indice ? this.selectores.splice(this.indice, 1) : this.selectores.push(selector);
                    this.elemento.className = this.selectores.join(' ');
 
                },
 
                add: function(selector) {
 
                    this.indice = this.selectores.indexOf(selector);
                    ~this.indice ? '' : this.selectores.push(selector);
                    this.elemento.className = this.selectores.join(' ');
                },
 
                remove : function(selector) {
 
                    this.indice = this.selectores.indexOf(selector);
                    ~this.indice ? this.selectores.splice(this.indice, 1) : '';
                    this.elemento.className = this.selectores.join(' ');
                }
            }
        },
 
        configurable: true,
        writeable: false
    });
}

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