Блог

Как я могу изменить #win img стиль с помощью javascript? Я хочу изменить стиль на: 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>
  

Я думаю, будет намного лучше, если вы будете использовать классы для этой цели.

Пожалуйста, попробуйте это решение:

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

Надеюсь, это поможет.

вы можете использовать этот код jQuery для изменения CSS любого элемента страницы с помощью javascript:

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

JSFiddle

Вы также можете использовать чистый JavaScript для этого, но вам нужно будет создать идентификатор для вашего img тега, и код будет выглядеть следующим образом:

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

вы можете использовать, как показано ниже

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

из вашего кода кажется, что вы не совсем поняли, как работают селекторы css. лучший ответ, который я могу вам дать, это направить вас на http://www.w3schools.com / чтобы сначала изучить основы.

однако обратите внимание, что селекторы css работают именно так:

• селектор, имеющий префикс #, ссылается на идентификатор.
• селектор, который имеет . префикс относится к классу.
• селектор, который не имеет префикса, ссылается на элемент.

поэтому ваш селектор #win img выбирает <img> элементы внутри некоторого элемента с id="win" помощью .
однако в вашем div с идентификатором «win» нет никакого <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: ...
});