javascript - 删除 WordPress 中特定标签的样式 (Javascript)

Question

在 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");

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