一、JS获取img的src值
在Web开发中，经常需要获取图片的地址，以实现一些预处理或统计工作，此时就需要获取img元素的src值。
我们可以通过获取图片元素并访问其src属性来获取图片的地址：
let img = document.getElementById('myImage');
let imgSrc = img.src;
console.log(imgSrc);
上述代码中，我们通过getElementById获取id为myImage的img元素，并通过访问其src属性获取图片地址，并将其保存在imgSrc变量中。
二、JS获取img标签的src
虽然和上一个标题类似，但本小节指的是直接获取img标签中的src属性值，而不是获取通过DOM操作获取img元素后的src属性值。
我们可以通过getAttribute方法获取img标签的src：
let imgSrc = document.getElementById('myImage').getAttribute('src');
console.log(imgSrc);
上述代码中，我们通过getElementById获取id为myImage的img元素，并通过getAttribute方法获取img标签的src，并将其保存在imgSrc变量中。
三、JS获取img的src属性
有时候，我们需要获取img元素的src属性本身，这时可以用getAttribute方法获取src属性：
let imgSrcAttr = document.getElementById('myImage').getAttributeNode('src').value;
console.log(imgSrcAttr);
上述代码中，我们通过getAttributeNode获取img元素的src属性节点，并通过value属性获取其值，并将其保存在imgSrcAttr变量中。
四、JS获取img的宽高
有时候需要获取图片的宽高，这时可以通过width和height属性获取：
let img = document.getElementById('myImage');
let width = img.width;
let height = img.height;
console.log('宽：' + width + '，高：' + height);
上述代码中，我们通过getElementById获取id为myImage的img元素，并通过width和height属性获取其宽高，并将其分别保存在width和height变量中。
五、JS怎么获取img的src
有三种方式可以获取img的src：
1. 直接获取img元素的src属性值：
let imgSrc = document.getElementById('myImage').src;
console.log(imgSrc);
2. 通过getAttribute方法获取img标签的src属性值：
let imgSrcAttr = document.getElementById('myImage').getAttribute('src');
console.log(imgSrcAttr);
3. 通过getAttributeNode方法获取img元素的src属性节点：
let imgSrcAttrNode = document.getElementById('myImage').getAttributeNode('src').value;
console.log(imgSrcAttrNode);
六、JS获取img的file
如果我们需要上传图片，那么就需要获取img的file对象，而不是其src属性值。可以使用input元素或者new FileReader()方法获取该对象：
let input = document.getElementById('fileInput');
let file = input.files[0];
console.log(file);
上述代码中，我们通过id获取input元素，并通过files属性获取其文件列表，从中获取第一个文件并保存在file变量中。
七、JS获取img的宽高为0
有时候，使用JS获取img的宽高可能会出现0的情况，这是因为图片没有加载完成，可以采用以下方法解决：
1. 使用window.onload事件：
window.onload = function() {
let img = document.getElementById('myImage');
let width = img.width;
let height = img.height;
console.log('宽：' + width + '，高：' + height);
}
2. 使用img元素的onload事件：
let img = document.getElementById('myImage');
img.onload = function() {
let width = img.width;
let height = img.height;
console.log('宽：' + width + '，高：' + height);
}
八、JS获取div里的img
有时候我们需要获取div等元素中的img标签，可以使用querySelectorAll方法获取所有img元素：
let imgList = document.querySelectorAll('div img');
for (let i = 0; i < imgList.length; i++) {
console.log(imgList[i].src);
}
上述代码中，我们通过querySelectorAll方法获取div元素中的所有img元素，并使用循环遍历所有的img元素，输出其src属性值。
原创文章，作者：OKXW，如若转载，请注明出处：https://www.506064.com/n/147929.html
微信扫一扫 
支付宝扫一扫 