前端开发--JavaScript--操作元素属性、改变元素内容

最新推荐文章于 2024-07-22 22:37:58 发布

小哦--

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/96422834

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文通过两个实例展示了如何使用JavaScript操作HTML元素的样式及内容。首先介绍了如何利用脚本更改指定元素的颜色和字体大小，并演示了如何通过变量设置元素样式的方法。其次，文章还解释了如何读取及更新DOM元素的内联内容。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv1 = document.getElementById('div1');
			oDiv1.style.color = 'red';
			oDiv1.style.fontSize = '30px';

			var oDiv2 = document.getElementById('div2');
			var sMystyle = 'color';
			var sValue = 'red';
			oDiv2.style[sMystyle] = sValue;
			//  属性用变量来代替的话，需要用[]来操作
		}

	</script>

</head>
<body>
	<div id="div1">这是一个div元素</div>
	<div id="div2">这也是一个div元素</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv1 = document.getElementById('div1');
			// 读取元素里面的内容
			var sTr = oDiv1.innerHTML;
			alert(sTr);
			//  修改元素里面的内容
			oDiv1.innerHTML = '修改的文字';
		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>