有来自服务器的图像:
<div class="storyDetail">
<img src="img/photo.jpg" height="180" width="300" style="float:left;">
</div>
现在我想在页面加载时通过javascript更改此图像:
<div class="storyDetail">
<div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>
</div>
我已经尝试过Javascript但没有得到任何东西,因为我不熟悉Javascript!
我在MR。@ sinisake的帮助下得到了答案。
<!-- Getting Image 'Src' -->
var storyDetailImageSrc= $('.storyDetail').find('img').attr('src');
<!-- Wrapping image with required div(s) -->
$('.storyDetail img').wrap('<a href="'+storyDetailImageSrc+'" class="tt-lightbox">');
$('.tt-lightbox').wrap('<div class="insta-gallery">');
要更改文字:
<div class="storyDetail" id="storyDetail01">
function changeText {
document.getElementById("storyDetail01").innerHTML =
' <div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>';
return false; }
如果不确定你为此目的做了什么,但最简单 - 最脏的 - 就是在html的底部添加一个scirpt
<body> -> that's your html page body
--- code code...
<script type="text/javascript">
changeText();
</script>
</body>