document对象改变HTML

最新推荐文章于 2023-01-30 09:48:22 发布

Program Debug

最新推荐文章于 2023-01-30 09:48:22 发布

阅读量791

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46990454/article/details/111244374

版权

JavaScript 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

使用document对象改变HTML输出流
JavaScript中的document对象能够动态的创建HMTL内容。document.write()方法可用于直接向HTML的输出流写内容。

<body>
	<script type="text/javascript">
		var time = new Date();
		var day = time.Date();
		document.write("今天是当前月的第" + day + "天");
	</script>
</body>

tips:
document.write()方法会在文档加载完成之后覆盖文档中的所有内容。

使用document对象改变HTML内容
修改HTML内容最简单的方法是使用innerHTML属性。

//语法结构：
//object.innerHTML（document.getElementById("").innerHTML）
<body>
	<div id="box"></div>
	<input id="click" type="button" value="添加文本"/>
	<script type="text/javascript">
		function insert(){
			document.getElementById("box").innerHTML = "hello world";
		}
		document.getElementById("click").onclick = insert;
	</script>
</body>

使用document.getElementById(“id”).style.样式属性 = 样式;

<body>
	<div id="box"></div>
	<input id="content" type="button" value="添加内容"/>
	<input id="style" type="button" value="添加样式"/>
	<script type="text/javascript">
		function content(){
			document.getElementById("box").innerHTML = "hello world";
		}
		function styles(){
			var obj = document.getElementById("box")
			obj.style.borderWidth = "1px";
			obj.style.borderColor = "orange";
			obj.style.borderStyle = "solid";
			obj.style.color = "red";
		}
		document.getElementById("content").onclick = content;
		document.getElementById("style").onclick = styles;
	</script>
</body>

使用document对象改变HTML属性

//document.getElementById("id").属性 = 属性;

Program Debug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document对象改变HTML

使用document对象改变HTML输出流JavaScript中的document对象能够动态的创建HMTL内容。document.write()方法可用于直接向HTML的输出流写内容。<body> <script type="text/javascript"> var time = new Date(); var day = time.Date(); document.write("今天是当前月的第" + day + "天"); </script>
复制链接

扫一扫