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

Question

在我的 wordpress posts 中，我希望文本段落的宽度为 80%，而图像的宽度为内容区域的 100%。但是图像被包裹在 <p> 标签中，所以我想写一个小脚本来找到 post 中的所有 p 标签，如果有的话包含 img 元素 - 给 p 标签一个 class 在 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/

当内容区域有 class 但没有 id 时，我不确定如何最好地进行 getElementsByTagName 不能是 getElementsByClassName.

的方法

Answer 1

getElementsByClassName returns 类似数组的元素列表，因此您不能对其结果调用元素方法。您可以遍历结果并运行每个结果的循环，但我建议一个更简单的解决方案：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 包含图像

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

javascript

wordpress

dom

width