我有一个控制台脚本(假设应用了jquery(，当单击元素时，我需要在其中获得完整的图像路径。元素可以是图像本身，也可以是背景图像，或者可以是div或嵌套元素中的图像。
结果只是图像的完整路径。
我尝试过下面的代码，当点击的元素是一个图像本身时，它就可以工作了。但是，如果元素是背景或位于iframe或其他东西中，我无法获得完整的图像路径。例如，当我点击图片时，它不会给出图片路径，因为它的框架https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_trulli或者在这里https://www.w3schools.com/html/html_images.asp
但它很可能会在谷歌图像搜索中让步
我如何为所有页面实现这一点，以便我获得所选图像的完整路径
//jquery already added
document.addEventListener('click', function (e) {
let srcElement = e.srcElement;
console.log($(srcElement).attr("style"))
if (srcElement.nodeName == 'IMG') {
srcElement.style.border="red 4px dotted"
alert(srcElement.currentSrc);
console.dir(srcElement);
}
//if the element is div or has sub elements get the background image with full path
}, false);
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<h2>HTML Image</h2>
<img src="example.jpg" alt="text" id="image">
<script>
alert(document.URL+"/"+$('#image').attr('src'));
</script>
</body>
</html>
你能试试这个代码吗？它获取域名和图像的路径，并将其组合为
这里面有一个简单的逻辑。
1( 。检查单击的元素是否具有src属性，如果是，则获取src值并在需要的地方使用它。2( 。如果单击的元素没有src属性，那么检查它在css中是否有background-image并获取该值。
我为你做了一个示范。
稍后谢谢我。
document.addEventListener('click', (e)=>{
let target = e.target;
if(target.src){
alert(target.src);
}
else if(target.style.backgroundImage) {
let bg = target.style.backgroundImage;
alert(bg.slice(5, -2));
}
})<img src="https://preview.ibb.co/cyESoU/img1.jpg" style="width: 400px;max-width:100%">
<p>Onclick no action because no src or background-image</p>
<div style="width: 400px;height: 250px;background: url(https://preview.ibb.co/cyESoU/img1.jpg) no-repeat center center;background-size: cover;max-width: 100%;"></div>- 不要使用jQuery
- 不使用警报进行调试
我有e.target.src.的img的完整路径
顺便说一句，如果你需要背景图像的URL：
let url = getComputedStyle(e.target).backgroundImage;
console.log(url.substring(5, url.length-2));