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

最新推荐文章于 2021-06-19 06:37:27 发布

是个小菜鸟没错了

最新推荐文章于 2021-06-19 06:37:27 发布

阅读量1.8k

点赞数 2

分类专栏： web前端——JS

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

版权

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标签，用到innerHTML
  		//因为p标签中没有value这个属性。在没有对应的标签属性时，就要用到innerHTML
  		//当已经满足了将文本框中的内容替换到标签内容后，不想要文本框中的内容再次显示，则使用清空文本框
  		oText.value="";
		}
	}
	</script>
</body>

最低0.47元/天解锁文章

是个小菜鸟没错了

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS中HTML的属性操作1——读写操作，清空在文本框中的值，点击按钮事件，在文本框中输入路径或者其它HTML值在p位置出现结果，输入图片路径，找到（出现）结果，并且返回位置

1.读取HTML标签的内容：语法：元素.属性名(1)在文本框中输入值，点击按钮后，后出现在文本框中输入的值，并且清空在文本框中的值<body> <input id="text1" type="text" value=""><!--在文本框中输入的值就相当于输入到了value值中，所以当要获取文本框中的内容时，就可以直接找到value <input ty...
复制链接

扫一扫