getclassname - obtener elemento por clase javascript
¿Cómo getElementByClass en lugar de GetElementById con JavaScript? (6)
Añadiendo a la respuesta de CMS , este es un enfoque más genérico de toggle_visibility que acabo de usar:
function toggle_visibility(className,display) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(display.length > 0) {
e.style.display = display;
} else {
if(e.style.display == ''block'') {
e.style.display = ''none'';
} else {
e.style.display = ''block'';
}
}
}
}
Intento alternar la visibilidad de ciertos elementos DIV en un sitio web según la clase de cada DIV. Estoy usando un fragmento de JavaScript básico para alternarlos. El problema es que el script solo usa getElementById , ya que getElementByClass no es compatible con JavaScript. Y desafortunadamente tengo que usar class y no id para nombrar los DIV porque los nombres DIV son dinámicamente generados por mi hoja de estilos XSLT usando ciertos nombres de categoría.
Sé que ciertos navegadores ahora son compatibles con getElementByClass , pero dado que Internet Explorer no lo hace, no quiero ir por esa ruta.
He encontrado scripts que usan funciones para obtener elementos por clase (como # 8 en esta página: http://www.dustindiaz.com/top-ten-javascript/ ), pero no entiendo cómo integrarlos con mi secuencia de comandos de alternancia.
Aquí está el código HTML. Los DIV en sí mismos faltan ya que se generan en la página cargada con XML / XSLT.
Pregunta principal: ¿Cómo obtengo la secuencia de comandos Toggle a continuación para obtener Elemento por Clase en lugar de obtener Elemento por ID?
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ''block'')
e.style.display = ''none'';
else
e.style.display = ''block'';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li''s-->
<a href="#" onclick="toggle_visibility(''class1'');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility(''class2'');">Click here to toggle visibility of class 2 objects</a>
</body>
</html>
El método getElementsByClassName ahora es compatible de forma nativa con las versiones más recientes de Firefox, Safari, Chrome, IE y Opera. Puedes hacer una función para verificar si hay una implementación nativa disponible; de lo contrario, utiliza el método de Dustin Diaz:
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|//s)"+searchClass+"(//s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
Uso:
function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(e.style.display == ''block'') {
e.style.display = ''none'';
} else {
e.style.display = ''block'';
}
}
}
Los navegadores modernos tienen soporte para document.getElementsByClassName . Puede ver el desglose completo de qué proveedores ofrecen esta funcionalidad en caniuse . Si está buscando extender el soporte en navegadores más antiguos, es posible que desee considerar un motor de selección como el que se encuentra en jQuery o en un relleno múltiple.
Respuesta anterior
Deberá verificar en jQuery , lo que permitirá lo siguiente:
$(".classname").hide(); // hides everything with class ''classname''
Google ofrece un archivo fuente jQuery alojado, por lo que puede hacer referencia a él y estar listo para funcionar en cuestión de minutos. Incluye lo siguiente en tu página:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".classname").hide();
});
</script>
Mi solución:
Primero crea etiquetas "<style>" con una ID.
<style id="YourID">
.YourClass {background-color:red}
</style>
Luego, creo una función en JavaScript como esta:
document.getElementById(''YourID'').innerHTML = ''.YourClass {background-color:blue}''
Funcionó como un encanto para mí.
Úselo para acceder a la clase en Javascript.
<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
document.getElementsByClassName(''CLASSNAME'')[0].style.display = ''none'';
En realidad, al utilizar getElementsByClassName, devuelve una matriz de múltiples clases. Porque el mismo nombre de clase podría usarse en más de una instancia dentro de la misma página HTML. Usamos ID de elemento de matriz para apuntar a la clase que necesitamos, en mi caso, es la primera instancia del nombre de clase dado. Por lo tanto, he usado [0]