【js】原生JS获取元素和修改元素属性

最新推荐文章于 2023-07-02 17:54:37 发布

冰冷的希望

最新推荐文章于 2023-07-02 17:54:37 发布

阅读量2.2k

点赞数

分类专栏： js 文章标签： javascript js css document getElementById

本文链接：https://blog.csdn.net/qq_39147299/article/details/107953185

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原生js获取标签可以使用内置对象document，获取到标签之后可以直接获取或修改属性

1.document获取标签

getElementById()	根据id获取元素，只会返回第一个元素
getElementsByName()	 获取所有指定name的元素集合
getElementsByTagName()	返回所有指定标签的元素集合

2.修改元素

属性名在js中的写法

html的属性和js里面属性大多数写法一样，但是 “class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”改成”style.fontSize”

<!DOCTYPE html>
<html>
<head>
	<title>js</title>
	<style type="text/css">
		.divCls{
			height: 100px;
			width: 200px;
			background: gray;
		}
	</style>
	<script type="text/javascript">
		//页面加载完之后执行该匿名函数
		window.onload = function(){
			var obj1 = document.getElementById('nameInput');
			console.log(obj1.value) //获取属性的值
			obj1.style.width = '300px'; //修改style属性的width值
			obj1.style.fontSize = '30px'; //修改style的font-size的值

			var obj2 = document.getElementById('divId');
			//修改该标签内的内容
			obj2.innerHTML = '<a href="https://www.baidu.com">这是一个被修改过的div标签</a>'
		}
		
	</script>
</head>
<body>
	<input id="nameInput" style="width: 100px" type="text" name="userName" value="请输入姓名"/>
	<div id="divId" class="divCls">这是一个div标签</div>
</body>
</html>

冰冷的希望

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【js】原生JS获取元素和修改元素属性

原生js获取标签可以使用内置对象document，获取到标签之后可以直接获取或修改属性1.document获取标签getElementById() 根据id获取元素，只会返回第一个元素getElementsByName() 获取所有指定name的元素集合getElementsByTagName() 返回所有指定标签的元素集合2.修改元素属性名在js中的写法html的属性和js里面属性大多数写法一样，但是 “class” 属性写成 “className”“style” 属性里面的属性，有
复制链接

扫一扫