我想知道有没有一种简单的方法在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来完成此操作。
谢谢。