javascript - 在Wordpress(Javascript)中删除特定标签上的样式

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

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

我在<a>的底部添加了虚线边框样式，但在我发布的每张图片下也都有虚线边框。

因此，我尝试在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");

最佳答案

从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转换为实际可迭代数组的一个技巧。