JS中HTML的属性操作1——读写操作，清空在文本框中的值，点击按钮事件，在文本框中输入路径或者其它HTML值在p位置出现结果，输入图片路径，找到（出现）结果，并且返回位置

是个小菜鸟没错了

于 2019-05-21 22:20:57 发布

阅读量1.9k

点赞数

分类专栏： web前端——JS

本文链接：https://blog.csdn.net/weixin_43170073/article/details/90416768

版权

本文介绍了JavaScript操作HTML属性的几种方法，包括读取文本框内容、清空文本框、触发按钮事件、在指定位置显示HTML内容和图片路径。示例展示了如何通过用户输入在页面动态展示文本、HTML标签和图片，并提供了实际运行效果的描述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.读取HTML标签的内容：
语法：元素.属性名
(1)在文本框中输入值，点击按钮后，后出现在文本框中输入的值，并且清空在文本框中的值

<body>
	<input id="text1" type="text" value=""><!--在文本框中输入的值就相当于输入到了value值中，所以当要获取文本框中的内容时，就可以直接找到value
	<input type="button" value="按钮" id="btn1" ><br>
	<p id="p1">这是一段文字。。。。。</p><!--读取标签中的文字信息——因为该标签中只有id或者其它属性，没有可以直接读取文字的属性——所以要运用到innerHTML-->
	<script type="text/javascript">
	window.onload=function (){//读取页面中所有的元素，window是页面标签中的“老大”
		var oBtn=document.getElementById("btn1");//获取元素
		var oText=document.getElementById('text1');
		var oP=document.getElementById('p1');
		
		oBtn.onclick=function(){//用到oBtn的原因是点击该按钮才会触发事件
  		//将在文本框中输入的内容，替换到想要去的标签内，eg：将p标签里面的内容替换
  		oP.innerHTML=oText.value; //点击按钮后文本框中的值会传递给p标签&