时间戳

首页 > 解决方案 > “src 属性”未从外部 JavaScript 文件或其他脚本块中获取值

javascript - “src 属性”未从外部 JavaScript 文件或其他脚本块中获取值

问题描述

我正在尝试获取图像标签的“src”值并显示在警报框中。警报框消息说：“未定义”。如果脚本包含在一个块中，它就可以工作。但是从另一个脚本块或外部 JavaScript 文件中获取一个值，会丢失保存的值。

<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
var y = document.getElementById('content');
var z = y.src;
</script>
</head>
<body>
  <img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
  <script>
       alert(z); // undefined?
   </script>
</body>
</html>

标签： javascript

解决方案

因为当执行此行时var y = document.getElementById('content');，元素 img 尚未准备好，因此 y 为 null 并且 y.src 未定义，如果您更改为var z = "test"，那么您可以看到警报显示正确：

<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
//var y = document.getElementById('content');
var z = "test";
</script>
</head>
<body>
  <img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
  <script>
       alert(z); // undefined?
   </script>
</body>
</html>

那么，如何解决呢？您可以var y = document.getElementById('content'); 在声明 img 元素后将该行放在脚本块中：

<!DOCTYPE html>
<html>
<head>
<title>Test src</title>

</head>
<body>

  <img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
  <script>
       var y = document.getElementById('content');
       var z = y.src;
      
      
   </script>
</body>
 <script>
       var y = document.getElementById('content');
       var z = y.src;
       alert(z); // undefined?
      
   </script>
</html>

推荐阅读