javascript tamañojavascriptstring dimensiones dinamicamente ancho texto nodo dom elemento jquer

Posted 2021-05-03

	
	//Función que retorna las dimensiones de un texto contenido en una serie (opcional) de contenedores con sus respectivas clases
	//@param texto {string} - Texto que contendrá el último elemento anidado y que definirá el ancho que queremos calcular
	//@param anidamiento {string} - selector estilo jquery que indica la sucessión de anidamientos y sus respectivas clases,
	//  por ejemplo ".miControl div.contenedor .texto". Si se presciden del tipo, se utilizarán span
	//@relativoAlAcestri {bool} - indica si nos interesa el tamaño del padre antecesor, o del elemento que tiene el texto (nodo hoja)
	//@param padre [jquery wrap] - objeto jquery que apunta al padre sobre el que se insertará el contenido de prueba. $("body") sy se omite
	"_calculaDimensiones": function(texto, anidamiento, relativoAlAncestro, padre) {
		padre = padre || $( document.body );
		anidamiento = anidamiento ? anidamiento.split(" ") : [];
		var clases, actual, raiz = $("<div class='calculaDimensiones'></div>"), 
			anterior = raiz, tipoElemento, selector;
		
		for( var i = 0; i < anidamiento.length; i++){
			selector = $.trim( anidamiento[ i ] );
			clases = selector.split(".");
			tipoElemento = selector.charAt(0) != "." ? clases.shift() : false;
			actual =  $('<'+ (tipoElemento || "span") +' />').addClass( clases.join(" ") );
			anterior.append( actual );
			anterior = actual;
		}
		
		actual.html( texto );
		raiz.css({
			position: "absolute",
			pointerEvents: "none",
			opacity: 0,
			display: "inline-block"
		});
		
		padre.append( raiz );
		var el = relativoAlAncestro ? raiz: actual;

		var dimensiones = {
			ancho : el.outerWidth(),
			alto : el.outerHeight()
		};
		
		padre.remove( '.calculaDimensiones' );
		return dimensiones;
	},