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

在Wordpress中删除特定标签上的样式（Javascript）

1 个答案: