Question

我一直在尝试使用自定义JavaScript更改位于页脚区域的品牌形象（在WordPress中）的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

问题是您正在选择父div，但您应该选择链接以访问其.href参数。

具体地：

<div id="branding-bottom" class="wf-td">
    <a id="link-to-change" 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("link-to-change").href = "https://www.newpageurl.html";
</script>

修改

如果您收到“无法选择空元素”错误，请检查您的脚本在解析html后运行：

<script> document.addEventListener("DOMContentLoaded", function() { // Waits for the html to be parsed document.getElementById("link-to-change").href="https://www.newpageurl.html"; }); </script>

Answer 3

ID为brand-bottom的项目为<div>且没有href属性。 href属性位于<a>标记上，该标记是其子标记。试试

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

Answer 4

您使用的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>

Answer 5

首先非常感谢你的帮助，这件事现在终于工作了。我认为你在DOM之前运行的脚本是正确的。但是，较新的解决方案并未改变URL的链接方式。我检查网站时没有收到错误。最后，两个建议的混合设法使其运作。

<script>
document.addEventListener("DOMContentLoaded", function() { 
    var element = document.getElementById("branding-bottom").getElementsByTagName("a")
    element[0].href= "https://www.google.com"
});
</script>

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

5 个答案: