【编程实践/JavaScript】使用JavaScript对html标签进行修改

时间：2025-01-22 13:12:44
  • 首先，我们要给标签设一个独一无二的“名字”
    在html5里面，我们称之为"id"，后续我们会利用这个id进行定位
    修改如下
    <body>
    <p id="info">111</p>
    <a id="access" href="html/"></a>
</body>
  • 新建一个JavaScript文件，编写逻辑
    我们采取的逻辑是输入密码，因此编写如下
    function input_password(){
	var password=prompt("请输入密码");//输入框
	/*if else判断密码*/
	if(password=="012704"){
    	//这里修改id为info的标签的内容以及id为access标签的href和内部名称
    	document.getElementById("info").innerHTML="密码正确";
    	document.getElementById("access").setAttribute("href","html/");
   	 	document.getElementById("access").innerHTML="查看图片";
	}
	else{
    	document.getElementById("info").innerHTML="密码错误";
    	document.getElementById("access").setAttribute("href","");
    	document.getElementById("access").innerHTML="重新输入";
	}
}

input_password()
    当然考虑到后续还会修改前端，因此先将逻辑部分写成函数
    这里的关键语句是
        document.getElementById("info").innerHTML="密码正确";
    document.getElementById("access").setAttribute("href","html/");
    其作用是：从html代码中选取id为info的内容，再修改其相关属性。其中如果修改内部文本，就修改innerHTML成员变量（选取的标签以对象的形式呈现），若是修改超链接地址（即href），不能像之前那样直接改对象，需要调用成员函数setAttribute，并传入待修改的属性和修改内容。
  • 引入至html代码中
    这里我们要添加一个< script >标签，并导入文件
    修改如下
    <body>
    <p id="info">&nbsp;</p>
    <a id="access" href="html/"></a>
    <!--这里采用相对路径！-->
    <script src="lib/"></script>
</body>

    • 相关文章