Question

我想知道是否有一种简单的方法来改变JavaScript中的CSS类。我在这里遇到了所有其他类似的问题，我找不到一个简单明了的解决方案。

我要做的是设置<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为＃34; myBg＆＃34;的元素的宽度。如果我颠倒高度和宽度的顺序，那么它只将高度设置为图像的高度。看起来首先它将元素的高度设置为图像高度，但是在它移动到下一个语句以设置宽度之后，高度值又回到最初在css中定义的值。

我在网上进行了进一步的研究，似乎使用JavaScript更改css（插入新属性，删除等）并非易事。它是通过

完成的

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

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

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

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

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

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

我不想定义新的＆＃34;风格＆＃34;我的html文件中的元素，我想更改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";
}

IE7或更低版本不支持注意querySelectorAll，如果您需要，那么此处有getElementsByClassName()的垫片。

Answer 2

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

如果您在变量

中保留尺寸，也可以为此添加值

var height = 600;
var width = 500;

您可以在需要时增加

height += 5;

以下是您可能会觉得有用的内容。它可以为您提供一些有关如何使用许多不同方法解决问题的见解，看起来好像您是js的新手。

Answer 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')

使用Javascript修改CSS类

3 个答案: