Question

使用自定义 JavaScript、WordPress 更改页脚区域中图像的 href

2017-07-20

366

javascript wordpress

我一直在尝试使用自定义 JavaScript 更改位于页脚区域的品牌图像（在 WordPress 中）的 a href，我认为图像和 URL 在此处定义：

  <!-- !Bottom-bar -->
    <div id="bottom-bar"  role="contentinfo">
        <div class="wf-wrap">
            <div class="wf-container-bottom">
                <div class="wf-table wf-mobile-collapsed">

                    <div id="branding-bottom" class="wf-td"><a href="https://change this url.com/"><img class=" preload-me" src="default.jpg" srcset="default.jpg 240w, default.jpg 240w" width="240" height="60"   sizes="240px" alt="default" /></a></div>
                        <div class="wf-td">
                            <div class="wf-float-left">
                            </div>
                        </div>

我尝试了一些解决方案，但似乎没有任何解决方案可以正常工作。

<script>
document.getElementById("branding-bottom").href = "https://www.newpageurl.html";
</script>

在其他帖子中，此代码已成功用于更改 href 和图像本身，但我只能在尝试加载页面时看到此错误。

Uncaught TypeError: Cannot set property 'href' of null at https://change this url.com/:366

我非常感谢能得到的每一份帮助，这对我来说仍然有点新且令人困惑。谢谢！

Answer 1

branding-bottom 是一个 <div> 并且没有 href

您要做的就是获取 branding-bottom 的子元素

这应该有效：

document.getElementById("branding-bottom").children[0].href = "https://www.newpageurl.html";

document.getElementById("branding-bottom").children[0].href = "https://www.newpageurl.html";

<div id="branding-bottom" class="wf-td">
  <a href="https://change this url.com/">link change</a>
</div>

Answer 2

您的 ID 为 branding-bottom 的项目是 <div> ，没有 href 属性。 href 属性位于其子标签 <a> 上。尝试

document.querySelector('#branding-bottom > a').href = 'https://www.newpageurl.html'

Answer 3

您使用的 Javascript 不正确。您需要定位实际的 a 元素，而不是其父 div。

<script>
    var element = document.getElementById("branding-bottom").getElementsByTagName("a")
    element[0].href= "https://www.newpageurl.html"
</script>

上面的代码将首先获取 branding-bottom ID，然后再获取该 div 内的 a 元素列表。从那里，我们选择第一个结果并使用 href 属性分配 URL；

在 jQuery 中还有一种更简单的方法：

<script>
    $("#branding-bottom a").attr("href", "https://www.newpageurl.html")
</script>