0

建立一个响应式网站，CMS的条目都在markdown中。因此，将 div 编码到所有新条目中的文档中是不切实际的。所以需要动态添加类。

我需要<img>在帖子中选择一个，然后用一个具有特定类的 div 包装它来设置它的样式。否则图像的原始宽度会偏离布局。

图像破坏布局

我通过将图像周围的 div 硬编码到帖子中找到了解决方案

HTML

<div class="imgWrap">
  <img>
</div>


CSS

.imgWrap { 
  margin: 0 auto 18px;
  width: 100%; 
}

.imgWrap img { 
  max-width: 96%; 
}

但这需要动态发生。我试过了

<script>
  var x=document.getElementsByTagName('div.post img')[0];
  document.write("<div class="imgWrap">");
  document.write("<img>");
  document.write("</div>");
</script>

我找到了这个 rel Javascript - How to add div class to createElement然后我点击了链接，包括帮助我启动脚本的HTML DOM className 属性，但对于下一步仍然感到困惑。

我正在用 Jekyll 用 Ruby 构建这个网站，以防你建议用不同的方式来解决这个问题。

4

2 回答 2

4 
var img = document.querySelector('div.post img');
var div = document.createElement('div');
div.className = 'imgWrap';
img.parentNode.insertBefore(div, img);
div.appendChild(img);

这应该适合你。querySelector一直工作到 IE8。

小提琴

如果有多个<img>标签的可能性，您可以使用document.querySelectorAll然后循环这些标签并执行相同的操作：

var imgs = document.querySelectorAll('div.post img');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
    var img = imgs[i];
    var div = document.createElement('div');
    div.className = 'imgWrap';
    img.parentNode.insertBefore(div, img);
    div.appendChild(img);
}
于 2013-08-16T05:24:45.717 回答
1

一种方法是

var img = document.querySelector('div.post img');
var imgParent = img.parentNode;
var div = document.createElement('div');
div.className = 'imgWrap';
div.appendChild(img);
imgParent.appendChild(div);
于 2013-08-16T05:32:40.133 回答