Question

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

#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>

Answer 1

您可以使用此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%";

Answer 2

我认为如果你为此目的使用课程会好得多。

请尝试这个解决方案：

<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>

希望它有所帮助。

Answer 3

你可以使用如下

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

Answer 4

从您的代码

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

但请注意，css选择器的工作方式如下：

具有＃前缀的选择器，指的是id。
有一个选择器。 prefix指的是class。
没有前缀的选择器，指的是一个元素。

因此，您的选择器#win img会使用<img>选择某个元素中的id="win"个元素。
然而，你的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: ...
});

使用Javascript更改DIV图像样式

4 个答案: