使用Javascript修改CSS类

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为"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来完成此操作。

谢谢。

- pouya zad

---

您无法更改CSS，因为它已经加载。但是您可以使用JavaScript更改任何CSS项的值，包括高度和宽度。 - durbnpoisn

不要使用setAttribute，而是使用document.getElementById("myBg").style.width= imgWidth + "px"; document.getElementById("myBg").style.height= imgHeight + "px"; - Kai Qing

@durbnpoisn 实际上你可以在加载后更改CSS，尽管这不是最好的解决方案。 - Teemu

我想我可以用更好的方式来表达。无论如何，现在有两个回答基本上澄清了最佳方法。 - durbnpoisn

@Teemu，你的“更改CSS”链接接近我想学习的内容。目前我的问题已经得到解决，没有使用“样式表”。但是，如果我想成为一名优秀的JavaScript程序员，我觉得我还需要学习你的方法。谢谢。 - pouya zad

@pouyazad 我猜想是这样。这段代码更具有通用性，它试图确保对规则所做的更改也应用于屏幕上。然而，正如在这里多次提到的那样，操纵样式表并不是解决您问题的方法。如果您发现其中任何一个答案有用，请通过选中该答案左上角附近的复选标记来接受它。 - Teemu

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（）的替代方案。

- MrCode

---

谢谢，这解决了我的问题。然而，其他class=container的元素仍然设置为在css中定义的内容。现在我没问题了，但（为了学习）如果可能的话，我想知道如何使用document.styleSheets更改class container。 - pouya zad

抱歉再次打扰您。所以，只有在我尝试更改一个属性时，setAttribute() 才有效吗？如果有多个类似于我的情况，那么 setAttribute() 就无用了吗？ - pouya zad

setAttribute 只能更改 HTML 属性，style 是一个属性，例如 <div style="">，id 是一个属性 <div id="">。但是，如果您使用它来设置样式，您可以设置多个 CSS 属性，例如 <div style="height:100px;width:200px;">。 - MrCode

Answer 2

如果您的规则开始递增，可以将您的CSS提取到一个新类中并切换类：

CSS:

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

JavaScript：

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

- sites

---

我该如何将我的新类注入到页面中，例如stackoverflow上的页面？ - Shayan

Answer 3

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

如果你将维度存储在变量中，也可以向此添加值。

var height = 600;
var width = 500;

在需要时可以进行递增

height += 5;

这里有些东西你可能会觉得有用。它可能会为你提供一些思路，让你了解如何以多种不同方式解决问题，尤其是你新手学习 JS。

- Josef E.