使用Javascript修改CSS类

Question

我想知道是否有一种简单的方法来改变JavaScript中的CSS类.我在这里经历了所有其他类似的问题,我找不到一个直截了当的简单解决方案.

我要做的是设置a的宽度和高度<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");

};

但是,这仅设置id为"myBg"的元素的宽度.如果我颠倒高度和宽度的顺序,那么它只将高度设置为图像的高度.看起来首先它将元素的高度设置为图像高度,但是在它移动到下一个语句以设置宽度之后,高度值会回到最初在css中定义的值.

我在网上进行了进一步的研究,似乎使用JavaScript更改css(插入新属性,删除等)并不是一件容易的事.它完成了

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

命令的类型,但所有在线和在stackoverflow上的教程都令人困惑和复杂.

我想知道是否有人熟悉document.styleSheets可以向我解释这个问题吗？

想象一下,我在单独的css文件中有这个类:

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

我想在加载时将高度和宽度更改为图片的尺寸.我该怎么做呢？

• 我不想在我的html文件中定义一个新的"style"元素,我想更改css文件.
• 我不应该在加载到页面之前知道图像尺寸.
• 请不要jquery,我想使用标准JavaScript来做这件事.

谢谢.

Answer 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";
}

querySelectorAllIE7或更低版​​本不支持注意,如果您需要,那么getElementsByClassName()SO上有垫片.