Espero alternar la visibilidad de un elemento: ¿debo comenzar con class = "..." o style = "..."?

Si tengo un elemento en una página web que espero mostrar y esconder bastante usando javascript, ¿cuál sería la forma más adecuada de establecerlo como inicialmente invisible?Espero alternar la visibilidad de un elemento: ¿debo comenzar con class = "..." o style = "..."?

<div class="hidden">...</div>

<div style="display: none;">...</div>

Usando class="..." es preferible style="..." en la mayoría de los casos, pero no estoy convencido de que es la mejor opción en este caso. Semánticamente, mi elemento no es un elemento oculto, es uno que comienza oculto cuando la página se carga por primera vez. Como estoy usando el show de jQuery() y hide() métodos, que significa que a menudo va a estar en este estado:

<div class="hidden" style="display: block;">...</div>

.. que para mí es claramente absurdo.

Por otro lado, usar un style="display: none;" en línea se siente de alguna manera raro y codificado.

Soy consciente de que cualquiera de los métodos funcionará perfectamente y el usuario nunca será más inteligente, pero ¿qué patrón viola los principios de diseño al mínimo?

Fuente

2009-10-30 teedyay

Utilice un JS fw. Prototipo div.hide(); div.show(); – erenon

Mmm ... Podría usar div.hide(), pero eso significa que está visible por un momento mientras se carga la página. – teedyay

Utilice este código jQuery con display: ninguno en su div (puede codificarlo en línea si lo desea) y tendrá su div conmutado: var flip = 0; $ ("button"). click (function() {$ ("div"). toggle (flip ++% 2 == 0);}) – tahdhaze09

Llama al estilo initially-hidden. Transmite con precisión la información, y tiene sentido si alguna vez consultara ese estilo usando jQuery.

Fuente

2009-10-30 15:34:51

Esto es hermoso. – teedyay

Creo que si va a alternar cambiando la visualización de "" a "ninguno", debe usar el estilo. Si va a alternar cambiando la clase de "oculto" a "", debe usar la clase. En otras palabras, sé consistente.

Fuente

2009-10-30 15:36:55

Si planea usar un marco de JavaScript para hacer esto, probablemente debería usar la convención de este. Por ejemplo, Prototype usa el estilo = "display: none;" método, luego llama a Element.show() y Element.hide() más tarde para cambiarlo. – Jason

Si bien estoy de acuerdo en hacer que toda una clase simplemente llame la visibilidad inicial de algo que puede parecer un poco más, hace que sea más fácil averiguar qué está pasando. Especialmente si lo nombra algo descriptivo como "inicialmente oculto" como se sugirió anteriormente.

Así que, si bien no puedo llamar a un director de diseño específico, creo que lo que estoy sugiriendo tiene sus méritos. Esto es más fácil de mantener que la aplicación de un estilo directo que no se puede reutilizar y más obvio en cuanto a qué sucede que una llamada a hide() usando jQuery.

Fuente

2009-10-30 16:00:17

Está usando la clase como objetivo para JS. Es necesario Ni siquiera necesita incluir en la hoja de estilo. De hecho, dado que la clase es solo para JS/jQuery, no debería tenerla en absoluto. var flip = 0; $ ("button"). Click (function() { $ ("div"). Toggle (flip ++% 2 == 0); }); pantalla: ninguna está bien y funciona con precisión para alternar. Haga clic en el botón, aparece, haga clic de nuevo y desaparece. Exactamente de la forma en que los consultantes quieren que funcione. Activa y desactiva div. – tahdhaze09

Estoy de acuerdo en que funciona como el solicitante quiere, pero el solicitante presentó diferentes soluciones. Las preguntas no eran "cómo debería hacer esto" sino "lo que es mejor". –

Estoy usando la clase para definir la visibilidad del elemento cuando la página se carga por primera vez. En el css, .hidden (o .inicialmente oculto) sería {display: none; }. No usaría la clase como mi selector jQuery - jQuery probablemente seleccionaría el div individual por id, o alguna otra regla. – teedyay

Espero alternar la visibilidad de un elemento: ¿debo comenzar con class = "..." o style = "..."?

Respuesta

Cuestiones relacionadas