在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沒有超前功能 ，因此您無法使用普通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";
});

這是一個視覺示例。

還要注意， .forEach()可能並非在所有瀏覽器中都可用，並且Array slice引用只是將所選NodeList轉換為實際可迭代數組的一個技巧。