普通JS:使80%宽度元素100%IF包含一个图像

Plain JS: make 80% width element 100% IF contains an image

本文关键字：100%IF 元素 包含一 图像 JS 普通      更新时间：2023-09-26

在我的wordpress帖子中，我希望文本段落的宽度为内容区域的80%，但图像的宽度为100%。然而，图像被包裹在<p>标签中，所以我想写一个小脚本，找到帖子中的所有p标签，如果有包含img元素的话，给p标签一个在CSS中指定100%宽度的类。

我找到了一种使用getElementByID:的方法

    var kids = document.getElementById('content').getElementsByTagName('p');
    var looper = function(t){
    for(i=0; i<kids.length; i++){
      if(t[i].firstChild.tagName === "IMG"){
        t[i].setAttribute("class", "postimg");
      }
    }
    };
looper(kids);

这是jsbin：http://jsbin.com/meculi/

我不知道当内容区域有一个类但没有id时，如何最好地进行getElementsByTagName不能是getElementsByClassName. 的方法

getElementsByClassName返回一个类似数组的元素列表，因此不能对其结果调用元素方法。您可以循环查看结果并为每个结果运行循环，但我建议使用一个更简单的解决方案：querySelectorAll。

var kids = document.querySelectorAll('.content p');

这将使kids成为循环代码应该使用的NodeList。您甚至可以更进一步，让querySelectorAll来查找包含图像的段落：

var paragraph_images = document.querySelectorAll('.content p > img');
for (var i = 0; i < paragraph_images.length; i++) {
    paragraph_images[i].parentNode.className += ' postimg';
}
相关文章：