用其他div包裹div中的图像

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用其他div包裹div中的图像相关的知识,希望对你有一定的参考价值。

有来自服务器的图像:

<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">');
另一答案

要更改文字:

  1. 在div中添加一个id:

<div class="storyDetail" id="storyDetail01">

  1. 定义一个函数: 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; }
  2. 将功能放在加载页面时执行Javascript的任何位置。

如果不确定你为此目的做了什么,但最简单 - 最脏的 - 就是在html的底部添加一个scirpt

    <body> -> that's your html page body
--- code code...

    <script type="text/javascript">
        changeText();
    </script>
</body>

以上是关于用其他div包裹div中的图像的主要内容,如果未能解决你的问题,请参考以下文章

CSS - 在浮动 div 中垂直居中图像

为啥 flexbox 不像 div 中的其他元素那样居中我的图像?

无法居中:在 div 中的图像与其他内容之前

包裹iframe的div与iframe存在高度差的问题解决方案

Html - a标签如何包裹Div

带有填充的 div 内的 img