在我的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';
}