Изменение классов CSS с помощью Javascript

Мне было интересно, есть ли простой способ изменить классы 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.

Спасибо.

Ответы

Ответ 1

Причина, по которой работает только одна или другая, заключается в том, что во второй строке кода вы уничтожаете весь атрибут style и воссоздаете его. Обратите внимание, что setAttribute() перезаписывает весь атрибут.

Лучшим решением было бы использовать свойство element.style, а не атрибут;

var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";

Вы можете захватить все элементы с помощью класса container и применить его к каждому из них следующим образом:

var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
    elements[i].style.width = imgWidth + "px";
    elements[i].style.height = imgHeight + "px";
}

Примечание querySelectorAll не поддерживается IE7 или ниже, если вам нужны те, тогда есть прокладки для getElementsByClassName() здесь, на SO.

Ответ 2

var object = doucment.createElement('container');
object.style.width= "500px";
object.style.height= "600px";

Вы также можете добавить значения к этому, если вы держите размеры в переменных

var height = 600;
var width = 500;

При необходимости вы можете увеличивать

height += 5;

Вот что вам может пригодиться. Он может дать вам некоторое представление о том, как вы можете решить проблему со многими различными подходами, видя, что вы новичок в js.

Надеюсь, это поможет!

Ответ 3

Если ваши правила начинают увеличиваться, вы можете извлечь свой css в новый класс и переключить классы:

CSS

.container-1{
  /* A set of rules */
}
.container-2{
  /* A set of rules */
}

JavaScript:

element.className = element.className.replace(/container-1/, 'container-2')