Question

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

我找到了一种方法来使用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.

的方法时，如何最好地继续

Answer 1

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';
}

普通JS：使80％宽度元素100％IF包含图像

1 个答案: