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