Question

嗨我想重写一个图像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中获取带有它的值的“Style”元素，并将该样式写入图像而不是原始样式。

最后，我想在页面上的容器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()

两者都不起作用：（

Ok 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>

正如你所看到的那样，我正在试图释放的网址有一个CDN前缀（出于好的理由，它通过wordpress反对我并且对我不起作用）。第二件事是关于图像标签的样式，它以某种方式设置为错误的尺寸，所以我想从第一个div（代码顶部）中获取正确的尺寸。

Answer 1

以下是在页面加载时，将图像“src”属性替换为存储在名为data-orig-file的图像上的属性中的网址的方式。

<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中，您可以替换＆lt; script＆gt;具有以下代码的代码与上述相同：

<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>

更改图像SRC和样式

1 个答案: