删除 Wordpress 中特定标签的样式 (Javascript)

Question

在 Wordpress 中，<img> 位于 <a> 标签内，如下所示。

<a>link text</a>
<a><img src="#"></a>

我在<a>的底部添加了虚线边框样式，但我post.

的每张图片下面也有虚线边框

所以我尝试在function.php中添加一个函数来去除<a><img src="#"></a>的边框，但是失败了。请用下面的代码帮助我。

function removeAnchorBorder() {
  var anchorWithPic = document.getElementsByTagName("a");
  if (anchorWithPic.contains(img) = true) {
    anchorWithPic.style.border = "none";
}
add_filter("the_content", "removeAnchorBorder");

Answer 1

自 CSS doesn't have look-ahead 起，您无法使用普通的 CSS 覆盖它，必须求助于使用 JavaScript.

这是一种非常幼稚的方法，如果您愿意，可以对很多逻辑进行优化或抽象以使用 jQuery：

var withoutImg = Array.prototype.slice.call(document.querySelectorAll('a'),0); 
var withImg = Array.prototype.slice.call(document.querySelectorAll('a img'),0);

withoutImg.forEach(function(node){ 
  node.style.borderStyle = "dotted";
});

withImg.forEach(function(node){ 
  node.parentElement.style.borderStyle = "none";
});

Here 是一个视觉示例。

另请注意，.forEach() 可能并非在所有浏览器中都可用，Array slice 引用只是将选定的 NodeList 转换为实际可迭代数组的技巧。

删除 Wordpress 中特定标签的样式 (Javascript)

Remove style on specific tags in Wordpress (Javascript)

html

javascript

wordpress

contains

getelementsbytagname