<think>我们有两个任务：
1.
获取某个类名下的图片元素（
img标签）
2.
获取这些图片元素的src属性
根据引用[4]和[5]，我们可以通过
标签名
获取元素，但是这里我们更关注的是在某个类名下的
img标签。因此，我们可以结合类名和
标签名来
获取。
方法一：使用querySelectorAll
我们可以先通过类名
获取到父元素，然后在这个父元素内部根据
标签名
获取img元素。
例如，假设我们有一个类名为"box"的div，里面包含
img标签，如引用[3]所示的结构：
<div
class="box">
<label for="">
<
img src="images/open.png" alt="" id="eye">
</label>
<input type="password" name="" id="">
</div>
我们想要
获取class为"box"的元素内部的
img标签的src属性。
步骤：
1.
获取所有类名为"box"的元素（注意：可能有多个）
2. 遍历每个类名为"box"的元素，然后
获取其内部的
img元素
3. 遍历这些
img元素，
获取它们的src属性
但是，如果我们已经知道
img元素在某个特定类名的元素内部，也可以直接使用后代选择器：
.box
img
这样一步就可以
获取所有类名为box的元素内部的
img元素。
因此，我们可以这样写：
方法二：直接使用后代选择器
const images = document.querySelectorAll('.box
img');
然后遍历这些图片元素，
获取src属性。
示例代码：
假设HTML结构如下（多个box）：
<div
class="box">
<
img src="images/open.png" alt="open">
</div>
<div
class="box">
<
img src="images/close.png" alt="close">
</div>
JavaScript代码：
//
获取所有类名为box内部的
img元素
const images = document.querySelectorAll('.box
img');
// 遍历这些图片
images.forEach(
img => {
console.log(
img.src); // 输出每个图片的完整URL
});
注意：通过
img.src
获取的是完整的URL（绝对路径），如果只需要HTML中写的原始路径，可以使用
img.getAttribute('src')，这样得到的是相对路径（或原始写的路径）。
根据引用[1]，我们可以通过两种方式
获取属性：
imgEle.src //
获取的是解析后的完整URL
imgEle.getAttribute('src') //
获取的是HTML中写的原始属性值
因此，根据需求选择使用。
如果只想
获取第一个匹配的图片的src，可以这样：
const first
Img = document.querySelector('.box
img');
if (first
Img) {
console.log(first
Img.src);
}
如果类名下的
img是动态添加的，我们需要确保在DOM加载完成后执行。可以将代码放在DOMContentLoaded事件中。
完整示例：
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('.box
img');
images.forEach(
img => {
console.log('完整URL:',
img.src);
console.log('原始src属性:',
img.getAttribute('src'));
});
});
另外，如果类名是唯一的，也可以先
获取该类的元素，再
获取其内部的
img，例如：
const box = document.querySelector('.box'); //
获取第一个类名为box的元素
if (box) {
const
img = box.querySelector('
img'); // 在box内部查找第一个
img
if (
img) {
console.log(
img.src);
}
}
但如果有多个box，则应该使用querySelectorAll来遍历。
总结：
- 使用document.querySelectorAll('.box
img')
获取所有类名为box的元素内部的
img元素
- 遍历这些
img元素，通过
img.src或
img.getAttribute('src')
获取src属性
注意：如果.box元素内部有多个
img，那么querySelectorAll('.box
img')会
获取到所有符合条件的
img。如果只想
获取直接子元素的
img，可以使用选择器'.box >
img'（但根据引用[3]的结构，
img并不是直接子元素，而是label的子元素，所以使用后代选择器空格）。
如果结构是引用[3]那样（有嵌套），我们仍然可以使用'.box
img'，因为它是后代选择器，会匹配所有后代中的
img。
因此，根据实际HTML结构选择合适的选择器。</think>在 JavaScript 中
获取特定类名元素下的 `<
img>`
标签的 `src` 属性，可以通过以下步骤实现：
### 解决方案步骤
1. **
获取父元素**：通过类名
获取包含图片的容器元素
2. **查找子元素**：在容器元素内查找 `<
img>`
标签
3. **
获取属性**：提取 `src` 属性值
### 完整代码示例
```html
<div
class="image-container">
<
img src="images/example.jpg" alt="示例图片">
</div>
<script>
// 1.
获取类名为 "image-container" 的元素
const container = document.querySelector('.image-container');
// 2. 在容器内查找
img 元素
const
imgElement = container.querySelector('
img');
// 3.
获取 src 属性
if (
imgElement) {
const srcValue =
imgElement.src; //
获取完整URL
const rawSrc =
imgElement.getAttribute('src'); //
获取原始属性值
console.log('完整URL:', srcValue);
console.log('原始属性值:', rawSrc);
} else {
console.log('未找到图片元素');
}
</script>
```
### 关键方法说明
1. **
获取容器元素**：
```javascript
//
获取第一个匹配元素
const container = document.querySelector('.
className');
//
获取所有匹配元素（多个容器）
const containers = document.querySelectorAll('.
className');
```
2. **查找图片元素**：
```javascript
// 在容器内查找第一个
img
const
img = container.querySelector('
img');
// 查找所有
img 元素（多个图片）
const allImages = container.querySelectorAll('
img');
```
3. **
获取 src 属性的两种方式**：
```javascript
//
获取解析后的完整 URL（推荐）
const fullUrl =
img.src;
//
获取 HTML 中原始属性值
const originalValue =
img.getAttribute('src');
```
### 处理多个容器和图片
```javascript
//
获取所有类名为 "gallery" 的容器
const galleries = document.querySelectorAll('.gallery');
galleries.forEach((gallery, index) => {
//
获取当前容器内的所有图片
const images = gallery.querySelectorAll('
img');
images.forEach((
img,
imgIndex) => {
console.log(`图库 ${index+1} 的图片 ${
imgIndex+1}:`,
img.src);
// 示例：为每个图片添加点击事件
img.addEventListener('click', function() {
alert(`点击图片: ${this.src}`);
});
});
});
```
### 注意事项
1. **元素存在性检查**：
```javascript
if (
imgElement) {
// 安全操作
}
```
2. **动态加载内容**：
对于动态添加的图片，使用事件委托：
```javascript
document.addEventListener('click', function(e) {
if (e.target.tagName === '
IMG' &&
e.target.closest('.gallery')) {
console.log('点击图片:', e.target.src);
}
});
```
3. **路径差异**：
- `
img.src` 返回完整绝对路径（如 `http://example.com/images/photo.jpg`）
- `
img.getAttribute('src')` 返回原始相对路径（如 `images/photo.jpg`）
### 实际应用场景
```javascript
//
获取所有相册封面
const albums = document.querySelectorAll('.album-cover');
albums.forEach(album => {
const coverImage = album.querySelector('
img');
if (coverImage) {
console.log('相册封面:', coverImage.src);
// 添加悬停效果
album.addEventListener('mouseenter', () => {
coverImage.style.transform = 'scale(1.05)';
});
album.addEventListener('mouseleave', () => {
coverImage.style.transform = 'scale(1)';
});
}
});
```
> **提示**：使用 `querySelector` 和 `querySelectorAll` 是最灵活的方法，可以处理各种 DOM 结构[^4][^5]。对于动态内容，优先使用事件委托模式确保事件绑定有效。
本文介绍如何使用JavaScript获取特定class下的img元素及其高度。通过getElementsByClassName与getElementsByTagName结合使用，定位图片并设置onload函数确保图片加载完成后再读取其尺寸。
扫一扫
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
