更改图像SRC和样式

Question

Hi I want to rewrite an image Src and Style element. 嗨，我想重写图像Src和Style元素。 The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element. image标记具有一个称为“ data-orig-file”的元素，而该URL具有要写入src元素的URL。 I came up with this but I'm not good at javascript: 我想出了这个，但我不擅长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);
}

Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style. 现在，第二，我想从图像的祖父母div中获取带有其值的“样式”元素，然后将该样式写入图像，而不是原始样式。

Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose). 最后，我想对页面上容器div内的所有图像进行加载时做这两件事（我想）。

Any help is greatly apreciated!! 任何帮助都非常感谢！

Thanks 谢谢

update: 更新：

what I came up with so far is this: 到目前为止，我想到的是：

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();
            };

I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part): 我还尝试了在body元素上使用“ onload”事件进行尝试（而不是wondow.onload部分）：

onload="javascript:ChangeImageSrc()

Both don't work this far :( 两者都无法正常工作:(

Ok AffluentOwl, here's the HTML: 好吧，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>

As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me). 如您所见，我尝试删除的URL带有一个CDN前缀（出于充分的原因，它与wordpress相对，对我不起作用）。 The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code). 第二件事是关于image标签的样式，它以某种方式设置为错误的尺寸，因此我想从第一个div（代码顶部）中获取正确的尺寸。

Answer 1

Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads. 这是在页面加载时，用存储在图像中名为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>

It would probably be helpful for you to look into the element selection functions in Javascript. 研究Javascript中的元素选择功能可能对您有所帮助。

getElementById getElementById
getElementsByClassName getElementsByClassName
getElementsByTagName getElementsByTagName
querySelector querySelector

You may even like to use jQuery which makes selecting elements much easier. 您甚至可能喜欢使用jQuery ，这使选择元素更加容易。 In jQuery you could replace the <script> code with the following for the same result as above: 在jQuery中，您可以将<script>代码替换为以下代码，以获得与上述相同的结果：

<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 个解决方案

解决方案1
0 已采纳 2013-12-30 10:07:48

更改图像SRC和样式

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-12-30 10:07:48

解决方案1
0 已采纳 2013-12-30 10:07:48