API操作元素属性

jl_3288

已于 2024-02-26 07:28:43 修改

阅读量139

点赞数 8

分类专栏： API 文章标签： javascript 前端

于 2024-02-04 11:17:43 首次发布

本文链接：https://blog.csdn.net/jl_3288/article/details/136021030

版权

API 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

操作元素属性
- 操作元素常用属性
- 操作元素样式属性
- 操作表单元素属性
- 自定义属性

操作元素属性

操作元素常用属性

语法：对象.属性 = 值
例如：

const pic = document.querySelector('img')
pic.src = './images/b02.jpg'
pic.title = '演出'

操作元素样式属性

修改路径：

通过style属性操作CSS
语法：对象.style.样式属性 = 值
例如：

<div class='.box'>hello</div>
<script>
	const box = document.querySelector('.box')
	box.style.width ='200px'
	//如果属性有连接符-，需要转换为小驼峰命名法
	box.style.marginTop = '15px'
</script>

操作类名（className）操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，故可以使用此方法
语法：元素.className = 'active'
注意：className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
例如：

	<style>
		div {
		width:200px;
		height:200px;
		background-color:pink;
		}
	
		.box {
		width:300px;
		height:300px;
		background-color:skyblue:
		margin:100px auto;
		padding:10px;
		border:1px solid blue;
		}
		
		.nav {
		color:red;
		}
	</style>
<body>
	<div>123</div>
	<script>
	const div = document.querySelector('div')
	div.className = 'box nav'
	//className会覆盖以前的类名
	</script>
</body>

通过classList操作类控制CSS
为了解决className会覆盖以前的类名，可以通过此方法追加和删掉类名
语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类，有就删掉，没有就加上
元素.classList.toggle('类名')

例如：

	<style>
		.box {
		width:300px;
		height:300px;
		color:#333;
		}
		
		.active {
		color:red;
		background-color:pink;
		}
	</style>
<body>
	<div class="box">123</div>
	<script>
	const div = document.querySelector('div')
	//类名不加点.，并且是字符串
	box.classList.add('active')
	</script>
</body>

操作表单元素属性

获取：DOM对象.属性值
设置：DOM对象.属性名 = 新值
表单属性中添加就有效果，一律使用布尔值表示，如果true代表添加该属性，false代表移除该属性
例如：

<body>
	<input class="input1" type="text" value="电脑">
	<input class="input2" type="checkbox" name="" id="" checked>
	<script>
		//获取元素
		const uname = document.querySelector('input1')
		//设置表单的值
		uname.value = '我要买电脑'
		uname.type = 'password'
		const ipt = document.querySelector('input2')
		ipt.checked = false
	</script>
</body>

自定义属性

在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
例如：

<body>
	<div class="box" data-id="10">盒子</div>
	<script>
		const box = document.querySelector('.box')
		console.log(box.dataset.id)
	</script>
</body>