Мне было интересно, есть ли простой способ изменить классы CSS в JavaScript. Здесь я рассмотрел все другие подобные вопросы, и я не смог найти прямое и простое решение.
то, что я пытаюсь сделать, - установить ширину и высоту <div>
для соответствия изображению, которое у меня есть на моем сайте (при загрузке). Я уже знаю размеры изображения, и я могу установить для него свой CSS, но я хочу, чтобы мой script понял это самостоятельно.
После часов r & d (я новичок), это то, что я придумал:
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");
};
Однако это только устанавливает ширину элемента с id "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.
- Я не должен знать размер изображения до того, как он загрузится на страницу.
- no jquery, пожалуйста, я хочу сделать это, используя только стандартный JavaScript.
Спасибо.