JS特效之动态变换

发表于 | 分类于 |
字数统计: 1.3k | 阅读时长 ≈ 5

特效其实可以通过控制台来查看，如果会JS会DOM在你的眼中，将没有特效可言。无非是通过JS动态的操作DOM而已。
下面我们将对id查询，标签查询，name查询等进行详细介绍。

1.div块的变换

使用div定义一个模块，通过点击来改变它的颜色。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<title>JS特效之动态变化</title>
<style>
div{
	width:45px;
	height:45px;
}
#test1{
	background:red;
}
#test2{
	background:green;
}
</style>
<script>
    function ch(){                              //使用function来定义函数ch()；
	var div= document.getElementById("test1");//获取test1的对象，不要忘了使用var定义类型，js中的var相当于c中的int
	div.id="test2";//将id改为test2
}
</script>
</head>

<body>
<div id="test1" onclick="ch();">//将通过onclick使用函数ch()，点击的时候相当于触发ch();函数
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
</div> 
</body>

2.img图片不断变换

img图片变换与div模块变换的使用方法是一样的。这里我们将img设置为不断点击不断变换，引入if语句和indexOf();函数的使用。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<title>img图片变换</title>
<script>
function toggle(){
	var test1= document.getElementById("test1");//寻找test1
	if(test1.src.indexOf("img/圣诞树.png")>=0){//用indexOf()方法查找字符串“img/圣诞树.png”,找不到返回值-1
		
	test1.src="img/top1.jpg";
}
else test1.src="img/圣诞树.png";
}
</script>
</head>

<body>
<img id="test1" src="img/圣诞树.png" onclick="toggle();" />
</body>

3.找对象

特效的第一步其实就是在找DOM对象，下面我们将进行详细介绍。
注意:script代码一定要注意写到对象的后面，否则会因为还没有读到而返回null

3.1id查询

通过id查询，返回值为“对象” 

1
2
3
4

<script>
alert(document.getElementById('test1'))；
</script>

3.2标签查询

通过标签查询，返回值为“对象集合”object HTMLcollection,即使只有一个对象，也返回的是对象的集合。
alert(document.getElementsByTagName('h1'));
那么问题来了，如果想要对标签的每一个实现不同的操作呢 

1
2
3
4
5
<script>
//将集合定义为一个数组，通过数组来实现不同的操作
ps =document.getElementsByTagName('p');
ps[0].style.background='red';
</script>

要想知道数组的长度，alert(document.getElementsByTagName('p').length);

3.3name查询

对于表单元素，可以通过name来查询。返回值为“节点集合”object NodeList
alert(document.getElementsByName('username'));

3.4按类名查找

按照类名class name查找，返回值为对象集合
document.getElementsByClassName('test2')[0].style.background='red';

3.5找子对象

可以通过.children或者.parent来查找子，父。返回值为对象集合。
除了查找元素，也可以对元素进行操作，具体操作方法这里不一一列举，读者可以通过W3C的DOM手册进行学习了解
源代码为标题一div块的变换的代码，下面这行代码将返回的值并不是3而是7.
alert(document.getElementById("test1").childNodes.length);
原因是由于DOM的语义规范，将test1下面的所有东西都会当成它的子对象，所以将4个空白的换行文本也当成它的子对象算在里面，这将使得我们在操作的时候造成很多不便。
因此，我们在实际操作的过程中并不使用上面的那种写法。
使用alert(document.getElementById('test1').children.length);的这种写法返回3，children属性虽然不标准，但是兼容性很好，现在的很多浏览器也支持，它不包含空白文本。
父对象，兄弟对象的属性类似。

4.操作对象

css属性与DOM对象属性存在对应关系，二者通过obj.style.css属性名相对应
如:obj.style.border
但是如果css属性带有横线，如border-top,需要把横线去掉并把横线后的字母大写。否则将会把横线理解为减号，应写为：obj.style.borderTop
需要注意的是obj.style只对内联style有效
操作div对象使得每点击一下宽高各增加20px,底边框增加2px;
要解决此问题我们需要引入parseInt();方法将字符串转化为数值数据。
还要注意css属性不能写到style标签里面，应该写到idv标签里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function ch(){
	var test =document.getElementById('test');
	var w = parseInt(test.style.width);//将字符串转化为数值数据
	var h = parseInt(test.style.height);
	var b = parseInt(test.style.borderBottomWidth);
	
	test.style.width= w+20 + "px";
	test.style.height= h+20 + "px";
	test.style.borderBottomWidth= b+2 + "px";
}
</script>
<body>
<div id="test" onclick="ch()" style="width:60px; height:60px; background:pink; border:1px solid blue"></div>
</body>

我们可以发现如果将css写成内联style会显得十分冗余，不美观。
可以用getComptedStyle(obj,伪参数)来获取css数据,伪参数通常写为null
第一个参数为要获取的对象
第二个参数为：after，：first-letter等
通常先包装一个类，在类里面返回数据 

1
2
3
function get(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null); 
}

此方法是只读，要想改还是得用obj.style