Me preguntaba si hay una manera fácil de cambiar las clases CSS en JavaScript. He revisado todas las otras preguntas similares aquí y no pude encontrar una solución simple y directa.

lo que intento hacer es establecer el ancho y la altura de un<div> para que coincida con una imagen que tengo en mi sitio (al cargar). Ya conozco las dimensiones de la imagen y puedo configurar mi CSS para eso, pero quiero que mi script lo resuelva por sí solo.

Después de horas de investigación y desarrollo (soy un principiante), esto es lo que se me ocurrió:

var myImg = new Image();

myImg.src = "img/default.jpg";

myImg.onload = function(){

    var imgWidth = this.width;
    var imgHeight = this.height;

    document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");
    document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");

};

Sin embargo, esto solo establece el ancho del elemento con la identificación "myBg". Si invierto el orden de la altura y el ancho, solo establece la altura a la altura de la imagen. Parece que primero establece la altura del elemento a la altura de la imagen, pero justo después de pasar a la siguiente instrucción para establecer el ancho, el valor de altura vuelve a lo que definió originalmente en CSS.

Investigué más en línea y parece que cambiar el CSS (insertar nuevos atributos, eliminar, etc.) usando JavaScript no es una tarea fácil. Se hace a través de

document.styleSheets[i].cssRules[i]  or  document.styleSheets[i].addRule

tipo de comandos, pero todos los tutoriales en línea y aquí en stackoverflow eran confusos y complicados.

Me preguntaba si alguien familiarizado con document.styleSheets puede explicarme esto simplemente.

Imagine que tengo esta clase en mi archivo css separado:

.container
{
    height: 600px;
    width: 500px;
}

Quiero que la altura y el ancho cambien a la dimensión de la imagen al cargarla. ¿Cómo hago esto?

No quiero definir un nuevo elemento de "estilo" en mi archivo html, quiero cambiar el archivo css.Se supone que no debo conocer la dimensión de la imagen antes de que se cargue en la página.no jquery por favor, quiero hacer esto usando solo JavaScript estándar.

Gracias.