使用javascript更改html元素的href

Question

细节：

嗨，专家们。 我想仅使用javascript更改现有的HTML主题，并且在使用javascript更改HTML元素的href时遇到问题。 但似乎我什至无法通过ClassName来获取元素，因为下面的javascript代码的console.log值显示为0长度。 请帮助我如何修复代码。 （请注意，我无法编辑现有的HTML代码，只能编写JavaScript的自定义代码）。 最好的祝福

我的JavaScript如下：

var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length); --1st console
if (x8.length > 0){
console.log("ENTERED. length=", x8.length); --2nd console
x8[0].href = "javascript:history.back()";
}

我的HTML如下（部分内容）：

                <div class="slrofrpg-service-btn">
                  <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
                  </a>
                  <!-- react-text: 219 --> 
                  <!-- /react-text -->
                  <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
                  </a>
                </div>

第一个控制台日志结果：

length=0

第二个控制台日志结果：无结果

Answer 1

该代码在这里工作正常。 您的脚本在加载html之前运行。您可以

将<script>标记移到<body>末尾
或使用window.onload事件

 window.onload = function(){ var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn"); console.log("length=",x8.length); if (x8.length > 0){ console.log("ENTERED. length=", x8.length); x8[0].href = "javascript:history.back()"; } }

 <div class="slrofrpg-service-btn"> <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back </a> <!-- react-text: 219 --> <!-- /react-text --> <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now </a> </div>

Answer 2

似乎您在加载dom之前正在运行javascript。 在body标签的结尾附近添加JavaScript或添加外部js文件

<body>
   // html code
 <script>
   //js code here
 </script>
</body>

 var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn"); console.log("length=", x8.length); if (x8.length > 0) { console.log("ENTERED. length=", x8.length); x8[0].href = "javascript:history.back()"; }

 <div class="slrofrpg-service-btn"> <a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back </a> <!-- react-text: 219 --> <!-- /react-text --> <a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now </a> </div>

使用javascript更改html元素的href

问题描述

2 个解决方案

解决方案1
1 2019-02-22 04:08:09

解决方案2
0 2019-02-22 04:07:31

使用javascript更改html元素的href

问题描述

2 个解决方案

解决方案1 1 2019-02-22 04:08:09

解决方案2 0 2019-02-22 04:07:31

解决方案1
1 2019-02-22 04:08:09

解决方案2
0 2019-02-22 04:07:31