JS笔记（三）csstext、获取对象、自定义标签属性

最新推荐文章于 2024-06-22 10:35:36 发布

DragonLoveYQ

最新推荐文章于 2024-06-22 10:35:36 发布

阅读量380

点赞数

分类专栏：个人学习文章标签： js

本文链接：https://blog.csdn.net/DragonLoveYQ/article/details/109580750

版权

个人学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中使用cssText来一次性修改多个样式属性的方法，详细讲解了如何通过name属性和querySelectorAll、querySelector获取DOM对象，并探讨了自定义标签属性的操作技巧。

摘要由CSDN通过智能技术生成

一、cssText用于同时修改多条属性

<style>
	#box{
		width:100px;
		height:100px;
		background-color: lightpink;
	}
</style>
<div id='box'></div>

通常的指定什么修改什么

	var box = document.getElementById('box');
	box.onclick = function (){
		box.style.width = '200px';//指定修改宽度
	    box.style.height = '200px';//高度
	    box.style.backgroundColor = 'yellowgreen'//背景颜色
	}

一次操作多种样式的方法cssText：

	var box = document.getElementById('box');
	box.onclick = function (){
		box.style.cssText = `width:200px;
		height:200px;
		background-color: yellowgreen;`
	}
	//就跟css写行内样式一样

二、获取对象的具体方式

<body>
   <div class='box'>盒子1</div>
   <div class='box'>盒子2</div>
   <div class='box'>盒子3</div>
   <div class='box'>盒子4</div>
   <input type='text' name='user'>
   <input type='text' name='user'>
</body>
<script>
   	var box = document.getElementsByClassName('box');
   	console.log(box)//打印出来是一个集合
   	//单独控制某一个变量
   	box[0] //指定第一个
   	box[1]//第二个
</script>

获取带有name属性:

	var user= document.getElementsByName('user');
	console.log(user)

获取对象querySelectorAll 与 querySelector

<body>
	<div id="box">
	    <div class="wrap">wrap1</div>
	</div>
    <div class="wrap">wrap1</div>
</body>
<script>
	var wrap = document.querySelector('#box .wrap');//不兼容IE7及其以下
	console.log(wrap)
	//获取到的集合. 要用 wrap[index] 选取
</script>

三、自定义标签属性

自定义标签属性：

<div id="box" class="wrap" title="水果" fruits="蓝莓"></div>
//自定义标签属性：where这种属性是人为添加的叫自定义属性

操作合法的标签属性：

	var box = document.getElementById('box');
	box.title = '水果'；
	
	//修改样式 class是关键字，所以会报错
	alert( box.class ) = 'btn' ;//错误
	box.className = 'btn';//正确

操作自定义标签属性：

//自定义标签属性：where这种属性是人为添加的，叫自定义标签属性！
//特点：不能直接通过点操作;

//想要又要设置一个自定义标签属性
  <div id="box" class="wrap" title="水果" fruits="蓝莓"></div>

设置自定义属性方法：setAttribute( '属性名'，'值')
box.setAttribute( 'vegetables' , '白菜')

获取自定义标签属性方法：getAttribute( '属性名' );
var behavior = box.getAttribute( 'vegetables' );
console.log( vegetables);

删除自定义标签属性方法：removeAttribute( '属性名' );
box.removeAttribute( 'vegetables' );

判断自定义标签属性是否存在：hasAttribute('属性名');
box.hasAttribute( 'vegetables' )
返回：
true 存在
false 不存在