我想知道是否有一个简单的方法来改变
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中定义的内容.
我在线进行了进一步的研究,似乎更改CSS(插入新的属性,删除等)使用JavaScript并不是一件容易的事情.通过完成
document.styleSheets[i].cssRules[i] or document.styleSheets[i].addRule
类型的命令,但所有教程在线和这里在stackoverflow是混乱和复杂的.
我想知道如果有人熟悉document.styleSheets可以简单地解释这一点吗？
想象一下,我在我的单独的css文件中有这个类：
.container
{
height: 600px;
width: 500px;
}
我想要加载时,高度和宽度可以更改为图片的尺寸.我该如何做？
>我不想在我的html文件中定义一个新的“样式”元素,我想更改css文件.
>在加载到页面之前,我不应该知道图像尺寸.
>没有jquery请,我想这样做只使用标准的JavaScript.
谢谢.
解决方法
原因只有一个或另一个工作是因为在你的第二行代码,你销毁整个style属性,并重新创建它.请注意,setAttribute()将覆盖整个属性.
一个更好的解决方案是使用element.style属性,而不是属性;
var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";
您可以使用类容器抓取所有元素,并将其应用于每个元素,如下所示：
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或更低版本支持,如果您需要那些,那么在这里SOE上有getElementsByClassName()的垫片.
