更改图像 SRC 和样式答案

【问题标题】：change image SRC and Style更改图像 SRC 和样式
【发布时间】：2013-12-30 08:48:49
【问题描述】：

您好，我想重写一个图像 Src 和 Style 元素。图像标签有一个名为“data-orig-file”的元素，其中包含我要写入 src 元素的 url。我想出了这个，但我不擅长 javascript：

function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}

其次，我想从图像的祖父母 div 中获取“样式”元素及其值，并将该样式写入图像而不是原始样式。

最后我想在页面加载时对容器 div 内的所有图像执行这两件事（我想）。

非常感谢任何帮助！

谢谢

更新：

到目前为止，我想出的是：

function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;

for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}

window.onload = function()
            {
               ChangeImageSrc();
            };

我还尝试在 body 元素上使用“onload”事件，就像这样（而不是 wondow.onload 部分）：

onload="javascript:ChangeImageSrc()

这两个都行不通:(

好的，AffluentOwl，这是 HTML：

<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000"  data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>

如您所见，我试图释放的 url 有一个 CDN 前缀（出于充分的理由，它与 wordpress 对立，对我不起作用）。第二件事是关于图像标签的样式，它以某种方式设置为错误的尺寸，所以我想从第一个 div（代码顶部）中获取正确的尺寸。

【问题讨论】：

您能否提供一个您希望修改的文件的 HTML 示例？您似乎混淆了“属性”和“元素”等术语，所以我想更好地了解您的意图。

标签： javascript image tags rewrite

【解决方案1】：

当页面加载时，如何使用存储在图像上名为 data-orig-file 的属性中的 url 替换图像的 src 属性。

<html>
    <script>
    function ChangeImageSrc() {
        var div = document.getElementsByClassName("gallery-group images-1")[0];
        var images = div.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
            images[i].setAttribute("style", div.getAttribute("style"));
        }
    }

    window.onload = ChangeImageSrc;
    </script>

    <div class="gallery-group images-1" style="width: 500px; height: 500px;">
        <div class="tiled-gallery-item tiled-gallery-item-large">
            <img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
            <img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
            <img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
        </div>
    </div>
</html>

了解 Javascript 中的元素选择函数可能会对您有所帮助。

您甚至可能喜欢使用jQuery，这让selecting elements 变得更容易。在 jQuery 中，您可以用以下代码替换

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
    var div = $(".gallery-group.images-1");
    var images = div.find("img");

    images.each(function() {
        $(this).attr("src", $(this).attr("data-orig-file"));
        $(this).attr("style", div.attr("style"));
    });
});
</script>

【讨论】：

嗨 AffluentOwl，感谢您的帮助！您提供的 sn-p 放在头部时不知何故不起作用。我想要做的是用常规 url 替换 CDN url，这也可以通过剥离我后来发现的 CDN 添加的前缀来完成！我会这样做document.getElementById("img").src = img.src.replace(array('i2.wp.com/','i1.wp.com/'), ''); ，正如你所看到的，我正在尝试释放对我来说不能正常工作的 wordpress photon cdn，但是使用这个 sn-p 我得到一个错误，上面写着：Warning: preg_replace(): Delimiter must not be alphanumeric or backslash 跨度>
哦，不抱歉，这是来自具有相同目的的 php 文件的错误。我有时会默认使用 php，因为我似乎从未使用 js sn-ps 完成任何重写...
@MichielvanDijk 我已经用你的 HTML 结构更新了我的答案。如果这回答了您的问题，请告诉我。
嗨 AffluentOwl，非常感谢！！这是一段很棒的代码！剩下的唯一问题是我想对某个页面容器 div 中的所有图像执行此操作（witch 包含 .gallery-group div，其中包含图像）。现在发生的情况是，只有第一个图像得到 src 和样式重写。你有什么主意吗？到目前为止，谢谢！
我更新了代码以演示如何循环遍历多个图像。 getElementsByTagName 函数返回它匹配的所有元素的数组。当只有一个图像时，我索引到这个数组以使用getElementsByTagName("img")[0] 抓取第一张图像。现在我的代码显示了第一个示例中所有图像的 for 循环，并显示了如何在 jQuery 示例中使用 each 函数。