Cambiar la posición de DOM en relación con el elemento primario-contiene

Vista prévia

Descripción

contiene-Element es una pequeña biblioteca de JavaScript que coloca dinámicamente el elemento DOM en relación con su contenedor principal.

La librería tiene la capacidad de reposicionar, redimensionar y recortar cualquier elemento DOM conservando la relación de aspecto original, similar a la propiedad background-position de CSS.

Funcionamiento

Importe el archivo JavaScript en el documento HTML.

<script src="contain-element.min.js"></script>

Inicializar el elemento de contener en el elemento de destino.

window.onload = function() {

var instance = new ContainElement({



element: document.getElementById("element"),



// or



id: "element",

});
};

Especifique el tamaño del elemento.

window.onload = function() {

var contain = new ContainElement({





element: document.getElementById("element"),



// or



id: "element",




// width/height



width: 300,



height: 300,




// vertica/horizontal alignment



// default: center



valign: "top",



halign: "20",




 // cover or contain



fit: "cover",




 // use transform scale instead of width and height



scale: false


});
};

Métodos de API disponibles.

// updates the size and position of the element.
instance.update()

// sets the size and alignment
instance.setWidth(width)
instance.setHeight(height)
instance.setValign(valign)
instance.setHalign(halign)

// sets the fit method
instance.setFit(fit)

// gets information
instance.getWidth()
instance.getHeight()
instance.getCurrentWidth()
instance.getCurrentHeight()
instance.getValign()
instance.getHalign()
instance.getFit()
instance.getScale()