javascript(DOM调整属性与样式&计时器)(DAY23)
这篇文章会介绍如何利用DOM动态的新增、取得、删除元素的属性值，以及认识javascript的计时器函式，并且将这篇所学结合一个常常在网路上看到的网站效果(照片自动轮番)的例子来让大家更了解如何应用!
-
动态调整元素属性
setAttribute(,):新增指定的属性&属性值到元素中
img.setAttribute("src", S__16023554.jpg);
//在img中新增src属性并给予S16023554.jpg属性值
getAttribute():从特定元素中取得属性值
img.getAttribute("src");
//取得img的src属性值
removeAttribute():删除指定的属性
img.removeAttribute("src");
//删除img的src属性值
-
动态调整元素样式(style)
方法1:使用classList属性:返回class类别中的集合，像是CSS中的类别选择器:
<style>
.change {
border:solid;
border-color:chartreuse;
}
</style>
-
classList.add("类别名称"):新增类别样式 -
classList.remove("类别名称")：删除类别样式 -
classList.toogle("类别名称"):将原本的类别更改成指定的类别样式
重要补充: 使用classList.add不会覆盖掉元素中原本就有的class属性，而若使用另一个类似的属性
classname则会覆盖掉原本的class属性!
方法2:直接更改元素中的style
document.getElementById(元素id).style.属性= 属性值;
ex: document.getElementById("myid").style.color = "green";
-
JS计时器(Timer)
设定计时器:
var mytimer= setInterval(change, 4000);
change为要呼叫的函式，4000为interval(隔多久呼叫一次函式，4000毫秒=4秒)
停止计时器:
clearInterval(mytimer);
Example:照片自动轮番
>>>经过4秒後，自动变换照片
<head>
<style>
.set {
border:solid;
border-width:thick;
border-color:darkturquoise;
}
</style>
<script>
setInterval(change, 4000);
//4秒呼叫一次change函式
var i = 0;
//从第1张照片开始进入函式
function change() {
var smallimg = document.getElementById("s-picture").getElementsByTagName("img");
var bigimg = document.getElementById("b-picture");
smallimg[i].classList.remove("set");
//移除第i张的set(class类别)
i++;
//转换到下一张图片
if (i == smallimg.length) {
i = 0;
}
//照片都跑完一轮後，从第一张照片开始跑
smallimg[i].classList.add("set");
//新增第i张的set(class类别)
bigimg.setAttribute("src", smallimg[i].getAttribute("src"));
//将小图片的图片档放入大图片的src值中
}
</script>
</head>
<body>
<h1>照片定时轮番效果</h1>
<div id="s-picture">
<img class="set" src="S__16023554.jpg" height="200" width="200" />
<img class="" src="S__44679189.jpg" height="200" width="200" />
<img class="" src="S__44720220.jpg" height="200" width="200" />
<img class="" src="S__44720222.jpg" height="200" width="200" />
</div>
<div>
<img id="b-picture" src="S__16023554.jpg" />
</div>
</body>
结语
这篇文章介绍了如何用DOM控制属性与、样式和设定计时器(timer)，也利用这篇所认识的各种属性做一个照片自动轮番的小范例。而Javascript的部分也在这边告一个段落，下一篇将会进入vue.js!
<<: D26 - 用 Swift 和公开资讯，打造投资理财的 Apps { 三大法人成交比重实作.1 }
【心得】不同 gradient 使用方式-- radial-gradient()
radial-gradient() 我从前只以为它只有圆形，只能从中心开始渐层 结果发现...不!不...
人生还有更重要的事! 善选CISSP应考策略!
Express: 三个月内短冲型. 适合有一定的工作经验, 能专注在一个目标, 每天下班後可稳定且...
Day 16 Azure cognitive service: Face recognition- 让你的机器人认得你
Azure face service: Face recognition- 让你的机器人认得你 人脸...
DAY25 - 自学就像瞎子摸象，在未知的情况下试图拼出原貌
前言 记得以前在学校的时候修过资料结构与演算法，考试也都会考时间复杂度等相关的题目 毕业後，在公司上...
企划实现(29)
使用自定义的listview 第四部：创建listview的adapter package com....