添加样式：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
//可以存在多个style标签
<style>
.div1{width: 30%; height: 30%;background-color: aqua;}
</style>
<style>
.div1{width: 30%; height: 30%;background-color: red;}
</style>
<script>
//获取第二个样式表的样式
var sheet=document.styleSheets[1];
function test(){
//样式是否不可见，false可见，true不可见
sheet.disabled=false
}
function test1(){
sheet.disabled=true
}
function add(){
// 插入一个样式
sheet.insertRule(".div1{border:double}",1); // insertRule(“规则”，在第几个样式表)
}
function del(){
//删除第几个样式表的样式
sheet.deleteRule(1)
}
</script>
</head>
<body>
<input value="红色" type="button" onclick="test()">
<input value="蓝色" type="button" onclick="test1()">
<input value="添加" type="button" onclick="add()">
<input value="删除" type="button" onclick="del()">
<div class="div1" style="width: 500px;height: 100px"> aa </div>
</body>
</html>任意放大缩小文字：
※关键是设置一个全局变量记录字体大小。
经常用(document.getElementById("id").style.属性="值" 需要加引号 )通过DOM修改样式，而不用element.setAttribute(属性名,值)设置样式。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>
var size=16;
function change() {
// 通过DOM修改修改元素的样式
var t = document.getElementById('div1');
//修改t的背景颜色样式
t.style.backgroundColor="red";
t.style.fontSize = "80px";
}
function save(){
var t = document.getElementById('div1');
t.style.backgroundColor=null;
t.style.fontSize = "16px";
}
function big(){
size=size+5;
document.getElementById('a1').style.fontSize =size+"px";
}
function small(){
size=size-5;
document.getElementById('a1').style.fontSize =size+"px";
}
</script>
</head>
<body>
<!-"onmouseover":鼠标移上去触发的事件，"onmouseout"：鼠标挪开触发的事件->
<div id="div1" onmouseover="change()" onmouseout="save()"> 百度一下 </div>
<a id="a1">百度一下</a>
<input value="放大" type="button" id="a" onclick="big()">
<input value="缩小" type="button" onclick="small()">
</body>
</html>同时显示多个被选复选框的值：
※：同一类的复选框的name应该相同。checkd判断是否选中，返回bool值。
innerHTML可读可写，获取的值为带标签的文字。innerText获取文字，不带标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function show(){
var text = "";
var t=document.getElementById('div1');
// 通过相同的name获取到一个数组
var likes=document.getElementsByName("like");
// 循环遍历检查所有选中的框
for(var i=0;i<likes.length;i++) {
//判断时候被选中
if(likes[i].checked==true){
text += likes[i].value+" "
}
}
// 往固定的区域写入内容
t.innerHTML="您的选择是"+text;
}
</script>
</head>
<body>
//name必须相同
登山<input type="checkbox" name="like" value="登山" onchange="show()"><br>
游泳<input type="checkbox" name="like" value="游泳" onchange="show()"><br>
看书<input type="checkbox" name="like" value="看书" onchange="show()"><br>
钢琴<input type="checkbox" name="like" value="钢琴" onchange="show()">
<div id="div1"></div>
</body>
</html>获取时间：
※：通过toLocaleString转换为中文样式。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function system_time(){
// 初始化一个time对象
var time=new Date();
// 获取当前年
var year=time.getFullYear();
// 获取当前月份，从0开始所以+1
var month=time.getMonth()+1;
// 获取当前日期
var day=time.getDate();
// 获取小时
var hour=time.getHours();
// 获取分钟
var mi=time.getMinutes();
// 获取秒数
var se=time.getSeconds();
// 美化格式
if(month<10){month="0"+month}
if(day<10){day="0"+day}
if(hour<10){hour="0"+hour}
if(mi<10){mi="0"+mi}
if(se<10){se="0"+se}
var text=year+"-"+month+"-"+day+"-"+hour+":"+mi+":"+se;
div1.innerHTML=text;
}
</script>
</head>
// 当加载body时触发函数 setInterval(def,time) 每多长时间(ms)运行函数def
<body onload="setInterval(system_time,1000)">
<div id="div1"></div>
</body>
</html>动态添加和删除节点：
※：createElement(‘标签名’) 创建一个标签。 createTextNode("文本内容") 创建一个文本节点。
通过appendchild(添加的元素) 添加内容。removechild("要删除的节点") 删除一个节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function add(){
// 获取要修改的标签
var a=document.getElementById("div1");
// 创建P标签
var p1=document.createElement("p");
// 创建文本节点
var t=document.createTextNode("添加节点");
// 创建好的标签吃掉文本节点
p1.appendChild(t);
// 要修改的标签吃掉创建好的标签
a.appendChild(p1)
}
function del(){
// 获取删除的div
var a=document.getElementById("div1");
// 删除该标签的最后一个子节点
a.removeChild(a.lastElementChild);
}
</script>
</head>
<body>
<input type="button" value="添加节点" onclick="add()">
<input type="button" value="删除节点" onclick="del()">
<div id="div1"></div>
</body>
</html>