在 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 转换为实际可迭代数组的技巧.
关于javascript - 删除 WordPress 中特定标签的样式 (Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31768773/