静态Html 使用JavaScript 修改 href 值

html javascript js href


1. 背景

日常工作中常用的一些链接希望通过静态 html 的形式整理保存,方便使用。其中有一个小要求就是这些链接中的ip 是动态拼接的,每次都会变化,需要手动输入。首先想到就是写一个简单的form 表单输入这个动态的ip,然后增加一个提交的JavaScript 方法把页面中所有的 href 的值修改一遍。

但是前端知识实在是匮乏,折腾了好久都没有搞定。于是各种百度、google ,终于搞到了一个比较笨拙的方法,实现了想要的效果,这里记录一下实现的方法。

2. 简单示例实现

HTML 代码部分:

<input type="button" value = "修改“ id="btn"/>
<a id="test" href="http://www.baidu.com" target="_blank">百度</a>

JS 部分代码:

<script>
    document.getElementById("btn").onclick = function(){
        var aObj = document.getElementById("test");
        aObj.href = "https://www.google.com/";
        aObj.innerText = "google";
};
</script>

参考文档:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,115评论 0 3
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,741评论 0 8
  • 1、女娲补天 ps.仅使用人物部分设定,背景半架空。【原创】 盘古开天辟地之时,一位来自九重天上的神仙奉玉皇大帝之...
    UWWlayx阅读 4,233评论 0 0
  • 有这么个故事,从前一位国王大败邻国,带回了三个当地的美女。 第一个美女很驯顺。国王和她上床,过了一段日子,厌倦了,...
    何青猊阅读 1,592评论 0 0
  • 零星算之为己,总合算之为会; 非预算计长短,辩词是非。 有容乃大,方圆成规; 墨守心规两三事, 不成有奢望之心。 ...
    白继明阅读 3,599评论 0 0