Мне было интересно, если есть простой способ изменить классы CSS в JavaScript. Я рассмотрел все другие подобные вопросы здесь, и я не мог найти простое и простое решение.

что я пытаюсь сделать, это установить ширину и высоту<div> соответствовать изображению, которое у меня есть на моем сайте (при загрузке). Я уже знаю размеры изображения, и я могу установить свой CSS на это - но я хочу, чтобы мой скрипт сам это выяснил.

После нескольких часов исследований (я новичок) я пришел к такому выводу:

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");

};

Тем не менее, это только устанавливает ширину элемента с идентификатором "myBg". Если я переверну порядок высоты и ширины, то он только устанавливает высоту на высоту изображения. Кажется, что сначала он устанавливает высоту элемента равной высоте изображения, но сразу после того, как он переходит к следующему оператору для установки ширины, значение высоты возвращается к тому, что было определено изначально в css.

Я провел дополнительные исследования в Интернете, и похоже, что изменение CSS (вставка новых атрибутов, удаление и т. Д.) С использованием JavaScript - задача не из легких. Это делается через

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

Тип команд, но все учебники онлайн и здесь на stackoverflow были запутанными и сложными.

Мне было интересно, если кто-нибудь знакомый с document.styleSheets может объяснить это мне просто?

Представьте, что у меня есть этот класс в моем отдельном файле CSS:

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

Я хочу, чтобы при загрузке высота и ширина менялись до размеров картинки. Как мне это сделать?

Я не хочу определять новый элемент "style" в моем html-файле, я хочу изменить css-файл.Я не должен знать размер изображения до его загрузки на страницу.нет jquery, пожалуйста, я хочу сделать это, используя только стандартный JavaScript.

Спасибо.