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

Posted 2023-03-06

【中文标题】普通 JS：使 80% 宽度的元素 100% IF 包含图像

【英文标题】：Plain JS: make 80% width element 100% IF contains an image

【发布时间】：2016-09-03 09:59:26

【问题描述】：

在我的 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. 的方法

【参考方案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';

【讨论】：

非常感谢您提供这个简单的解决方案。我没有使用 querySelectorAll，因为有人告诉我它不像其他方法那样跨浏览器。

@Rup 除非您的目标是 IE 7 及更低版本，否则浏览器支持不是问题。见caniuse.com/#feat=queryselector