javascript获取页面第一张图片的方法是啥？我忘记了~~~就是在不知道id和name的情况下获取第一张图片的src
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript获取页面第一张图片的方法是啥？我忘记了~~~就是在不知道id和name的情况下获取第一张图片的src相关的知识，希望对你有一定的参考价值。
参考技术A document.getElementByTagName("img")[0].src其中,document.getElementById("img")是获取页面中所有的img标签.返回的是一个数组.
如果你知道父级的id可以在前面加上,
document.getElementById("id").getElementByTagName("img")[0].src
这样就是制定的位置下的所有的图片了 参考技术B document.images[0] 返回对文档中第一个 Image 对象引用。
实例
<html>
<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>
</html>本回答被提问者和网友采纳 参考技术C document.getElementById("ID名"); 参考技术D document.getElementsByTagName('img')[0].src
如何使用php中的while循环显示从数据库中获取的多个图像中的特定点击图像，以及用于显示的javascript？
我试图在php中使用while循环从数据库中获取一个特定的点击图像（单击html页面中的图像时的完整弹出屏幕），但是由于它在while循环中，我无法显示该特定图像。我得到的结果是，当我点击第一张图片时，我可以按照我想要的方式显示第一张图片，但是我无法显示图像的其余部分，我猜是我在img标签中提供的ID只能由第一张图片。因为它在一个while循环中我认为可以给id相同但我错了。我该如何解决这个问题？我尝试在while循环中增加$ i变量，但我无法在javascript中实现$ i。或者，还有更好的方法？继承我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
</head>
<body>
<?php
$servername = 'localhost';
$user = 'root';
$passwords = '';
$dbname = 'project';
$conn = new mysqli($servername, $user, $passwords, $dbname);
if($conn->connect_error)
die("Could not connect... ".$conn->connect_error);
$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
while($row = $result->fetch_assoc())
echo "<span id = 'photos'>";
echo "<img id = 'myProfile1' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
echo "</span>";
echo "<div id = 'popUp1' class = 'pop'>";
echo "<span class = 'close1'>×</span>";
echo "<img class = 'pop-content' id = 'img02'>";
echo "</div>";
else
echo "<p>You haven't uploaded any photo.</p>";
$conn->close();
?>
<script>
var pop1 = document.getElementById('popUp1');
var img1 = document.getElementById('myProfile1');
var popImg1 = document.getElementById('img02');
img1.onclick = function()
pop1.style.display = 'block';
popImg1.src = this.src;
var span1 = document.getElementsByClassName('close1')[0];
span1.onclick = function()
pop1.style.display = 'none';
</script>
</body>
</html>
先感谢您。
答案
我没有测试过这个，因为我还没有运行PHP设置。但我认为解决这个问题的一种方法可能是这样的：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
</head>
<body>
<?php
$servername = 'localhost';
$user = 'root';
$passwords = 'root';
$dbname = 'project';
$conn = new mysqli($servername, $user, $passwords, $dbname);
if($conn->connect_error)
die("Could not connect... ".$conn->connect_error);
$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
$i=0;
while($row = $result->fetch_assoc())
$i++;
echo "<span id = 'photos'>";
echo "<img onClick='showImage(" . $i . ")' id = 'myProfile" . $i . "' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
echo "</span>";
echo "<div id = 'popUp" . $i . "' class = 'pop1'>";
echo "<span class = 'close1' onClick='closeImage(" . $i . ")'>×</span>";
echo "<img class = 'pop-content' id = 'img" . $i . "'>";
echo "</div>";
else
echo "<p>You haven't uploaded any photo.</p>";
$conn->close();
?>
<script>
function showImage(intId)
var pop1 = document.getElementById('popUp'+intId);
var img1 = document.getElementById('myProfile'+intId);
var popImg1 = document.getElementById('img'+intId);
pop1.style.display = 'block';
popImg1.src = img1.src;
function closeImage(intId)
var pop1 = document.getElementById('popUp'+intId);
pop1.style.display = 'none';
</script>
</body>
</html>
以上是关于javascript获取页面第一张图片的方法是啥？我忘记了~~~就是在不知道id和name的情况下获取第一张图片的src的主要内容，如果未能解决你的问题，请参考以下文章
如何使用php中的while循环显示从数据库中获取的多个图像中的特定点击图像，以及用于显示的javascript？
从 JavaScript 中的关联数组中获取第一项的最有效方法是啥？