使用 Javascript 更改 DIV 图像样式答案

【问题标题】：Change DIV Image Style with Javascript使用 Javascript 更改 DIV 图像样式
【发布时间】：2023-03-12 22:51:01
【问题描述】：

如何使用 javascript 更改 #win img 样式？我想将样式更改为：max-width: 40%; max-height: 40%; 使用 javascript 或 jQuery。

#win img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

<div id="win" align="center" style="width: auto; margin-top: 30px; height: auto; max-width: 80%; max-height: 80%; overflow: auto;"></div>

<script type="text/javascript">
    document.getElementById("win").style["img"] = 'max-width: 40%; max-height: 40%;';
</script>

【问题讨论】：

不能直接改CSS或者HTML吗？使用 JS 进行样式设置不是一个好主意。

标签： javascript jquery html css

【解决方案1】：

我认为如果您为此目的使用类会更好。

请尝试以下解决方案：

<style>

.img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;    
}

.changesize { 
    max-width: 40%;
    max-height: 40%;
}

</style>

<div id="win" class="img">xyz</div>

<script>
    document.getElementById("win").className = "changesize";
</script>

希望对你有帮助。

【讨论】：

【解决方案2】：

您可以使用此 jQuery 代码通过 javascript 更改页面中任何元素的 CSS：

$("#win img").css({
    "max-width":"40%",
    "max-height":"40%"
});

JSFiddle

您也可以使用纯 JavaScript 来执行此操作，但您需要为您的 img 标签创建一个 id，代码如下所示：

document.getElementById("#myImage").style.maxWidth = "40%";
document.getElementById("#myImage").style.maxHeight = "40%";

【讨论】：

【解决方案3】：

你可以像下面这样使用

$('#win img').css({'max-width':'40%','max-height': '40%;'});

【讨论】：

【解决方案4】：

从您的代码看来，您并没有完全理解 css 选择器的工作原理。我能给你的最好答案是引导你到http://www.w3schools.com/先学习基础知识。

但是，请注意 css 选择器是这样工作的：

一个带有#前缀的选择器，指的是id。
具有 .前缀是指类。
没有前缀的选择器引用一个元素。

因此，您的选择器#win img 会选择带有id="win" 的某个元素内的<img> 元素。
但是，ID 为“win”的 div 内部没有任何 <img> 元素。

另外，element.style 是元素样式属性的集合，而不是样式集合，所以当您调用时：

document.getElementById("win").style["img"] = 'max-width: 40%; max-height: 40%;';

它的实际意思是找到一个id="win" 的元素并将其样式的'img' 属性设置为'max-width: 40%; max-height: 40%;'; 基本上你所做的等于：

#win{
   img:max-width: 40%; max-height: 40%;
}

这毫无意义。

为了选择#win img元素，你需要使用querySelectorAll，如下：

var myElements = document.querySelectorAll('#win img');

然后遍历你得到的列表并更新它们的样式。

element.style["max-width"]= "40%";
element.style["max-height"]= "40%";

或者由于您已将问题标记为 jQuery，您可以使用 jQuery 选择器并一次更新它们：

$("#win img").css({
    max-width: ...
    max-height: ...
    width: ...
    height: ...
});

【讨论】：