我是脚本新手,花了很多时间尝试编写一些代码。
我想读取某个图像的动态写入源,然后在页面下方写下另一个具有稍微不同来源的图像,例如 -
这张图片是动态写在页面顶部的
<img src="chrome.jpg" id="test1">
然后降低我想写 -
<img src="chrome2.jpg">
非常感谢艾米对此的帮助。
我是脚本新手,花了很多时间尝试编写一些代码。
我想读取某个图像的动态写入源,然后在页面下方写下另一个具有稍微不同来源的图像,例如 -
这张图片是动态写在页面顶部的
<img src="chrome.jpg" id="test1">
然后降低我想写 -
<img src="chrome2.jpg">
非常感谢艾米对此的帮助。
我假设您使用“页面”指的是一个 html 页面...并且我进一步假设您想在客户端执行此操作...
为此,您将需要 javascript,将 javascript 库用于此类任务是有意义的,这样事情会变得更容易。例如,使用 jQuery 库,您可以使用“选择器”来识别和使用 dom 树元素并添加或更改您想要的所有内容。就像是:
source=$('img#test1').attr('src');
// do something with the source url contained now inside source
$('p#further_down').append('<img>).attr('src',source);
<html>
<head>
<!-- inclusion of the jQuery Javascript library -->
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
</script>
<!-- this is 'your' function -->
<script type="text/javascript">
function doubleImg(){
// you 'get' the source url of the upper image:
var topSrc=$('#top img').attr('src');
// no you can do something with that url
// for this demo I replace the 'direction' inside the icons name:
var bottomSrc=topSrc.replace(/up/, 'down');
// now you create a new <img> tag
// and 'set' the changed url as 'src' attribute:
var img=$('<img width="100">').attr('src',bottomSrc);
// and finally you 'add' that <img> tag into your dom tree ("the page"):
$('#bottom').append(img);
}
</script>
<!-- this gets 'your' function executed ->
<script type="text/javascript">
$(window).load(doubleImg);
</script>
</head>
<body>
<!-- the "top" frame, note that it DOES hold an <img> inside -->
<fieldset id="top" style="border=2px solid green;">
<legend>TOP</legend>
<img width="100" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-arrow-up-icon.png">
</fieldset>
<br>
<!-- the "bottom" frame, note that it DOES NOT hold an <img> inside -->
<fieldset id="bottom" style="border=2px solid blue;">
<legend>BOTTOM</legend>
</fieldset>
</body>
</html>
我不确定你所说的仅脚本是什么意思,所以我提供了两种方法可以实现你想要的结果,通过DOM
& through jQuery
。
Using jQuery:
检索图像的`src:
var src = $(“#test1”).attr('src');
更改src
图像的:
$("# test1").attr("src","chrome2.jpg");
Using DOM:
检索图像的`src:
document.getElementById("test1").src;
更改src
图像的:
document.getElementById("test1").src="chrome2.jpg";
希望能帮助到你。