Question

我正在尝试将图像的高度设置为宽度的50％，但图像会随页面缩放。我定位的当前CSS看起来像这样：

.img-quiz p span img { width: 100%; }

这是我在js中尝试过的，但是没有工作：

var imgQuiz = document.getElementByClassName('img-quiz').getElementsByTagName('img');
var elementStyle = window.getComputedStyle(imgQuiz);
var pixHeight = elementStyle.getPropertyValue('height');
imgQuiz.style.height = pixHeight * .5;

另外，我是javascript的新手，我是否需要将其包装在一个函数中（即window.onload = function()）？

Answer 1

您的问题摘要： 我对你的情况的理解是，你试图制作一个图像的高度为网页的50％，但它没有这样做，你已经研究过不同的方法，包括JavaScript但是很挣扎，你也问过onload方法。

若是，这是我建议的解决方案

<强>解决方案在这个例子中，我们使用纯JavaScript（没有库或框架）
html已经为图像预先设置了src，如果你想动态设置src，那么使用下面的imgEl.src =＆＃34; path / to / file.jpg＆＃34 ;;

使用的方法或触发器是DOMContentLoaded，它确保在开始尝试读取和操作DOM元素之前已加载页面的所有HTML元素。

我们触发的函数叫做funStart（函数Start的简称），我总是鼓励人们使用定义对象类型的缩写，以便更容易阅读，如函数的乐趣，字符串的str，布尔的bl， obj表示对象，int表示整数等。

在funStart中我们将DOM元素指定为imgEl，这是一个图像obj，我们说宽度为innerWidth，即文档宽度
然后我们说将高度设置为文档高度（innerHeight）的50％，将值除以2.

＆＃13;

function funStart(){
  var imgEl = document.getElementById("targetImg");
  imgEl.height = innerHeight / 2;
  imgEl.width = innerWidth;
}
document.addEventListener("DOMContentLoaded", funStart, false);

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>
    <img id="targetImg" src="https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg" alt="background image" title="background">
  </body>
</html>

＆＃13;

Answer 2

查看这个JS小提琴寻求帮助......

https://jsfiddle.net/Lm60v949/6/

＆＃13;

var image = document.getElementsByClassName('img-quiz')[0].getElementsByTagName('img')[0];
// console.log( image ); // test to make sure the image was captured
/*
var image = document.getElementById('imgQuiz'); // much cleaner way to select
*/
image.height = image.width / 2;
// console.log( image.height, image.width ); // check the results

＆＃13;

.img-quiz p span img { width: 100%; }

＆＃13;

<div class="img-quiz">
  <p>
    <span>
      <img id="imgQuiz" src="https://image.shutterstock.com/z/stock-photo--week-old-cocker-spaniel-puppy-630877553.jpg">
    </span>
  </p> 
</div>

＆＃13;

这里有几个小问题：

.getElementsByClassName 和 .getElementsByTagName 都返回HTMLCollection - 要使用这些，您必须选择与您的图像匹配的集合的索引（[0] ，[1]，[2]，...）如果可以，目标图像上的ID将是理想的。更容易编写和读取代码。

var image = document.getElementsByClassName('img-quiz')[0].getElementsByTagName('img')[0];

如果你想要布朗尼点，你可以这样做：

image.onload = function(){
   image.height = image.width / 2;
};

（假设您已将图像捕获并保存到变量＆＃34;图像＆＃34;）
这是一个很好的完整性检查，以确保图像存在（并具有高度和宽度），然后再尝试操作它。

您可能会稍微过度思考问题 - 一旦加载图像，您只需查看宽度并设置图像的高度属性。

你可以在这里做几件额外的事情：

检查以确保图像宽度不为0（零）...这是一个很好的仔细检查图像已加载

if（image.width＆gt; 0）{...}
将数字向下舍入为一个整数（.5大小增量没有任何问题，只需使用整数就可以了）

image.height = Math.floor（image.width / 2）;

Answer 3

这是一个简单的示例（您可以在here中了解更多信息）：

var image = document.getElementsByClassName('img-quiz')[0];
image.height = image.width / 2;

<img src="https://dummyimage.com/100x100">
<img class="img-quiz" src="https://dummyimage.com/100x100">

HTML文件将是这样的：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img src="https://dummyimage.com/100x100">
    <img class="img-quiz" src="https://dummyimage.com/100x100">
    <script>
      // you could also move the script tag to the head and add an event handler to the event load (window.onload = function() {...};
      var image = document.getElementsByClassName('img-quiz')[0];
      image.height = image.width / 2;
    </script>
  </body>
</html>

更改元素和类中元素的CSS

3 个答案: