<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
height: 200px;
background: gold;
overflow: scroll;
}
</style>
</head>
<body>
<div id="div1">
<p>添加標簽</p>
</div>
<input type="button" value="添加" onclick="f1()">
<input type="button" value="刪除" onclick="f2()">
</body>
<script>
/*Null & Undefined 當聲明的變量未初始化時，該變量的默認值是 undefined
如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null
var person=new Person()
var person=null
*/
function f1() {
//添加標簽 1.第一步首先獲得在那個標簽下添加標簽
var label_div1 = document.getElementById("div1");
//第二步，創建要添加的標簽元素,在文檔對象中添加
var ele_lab =document.createElement("p");
//添加內容
ele_lab.innerHTML="ds";
//第三步添加元素倒，div1標簽下
label_div1.appendChild(ele_lab);
}
function f2() {
//添加標簽 1.第一步首先獲得在那個標簽下刪除標簽
var label_div1 = document.getElementById("div1");
//找到最后一個
var remove_md = label_div1.lastElementChild;
//從后往前刪除
label_div1.removeChild(remove_md);
}
</script>
</html>
-----------------通過js調用class修改字體大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.big{
font-size: 50px;
background-color: firebrick;
}
.smill{
font-size: 10px;
background-color: royalblue;
}
</style>
</head>
<body>
<p id="pp">vsdvdvdsvdfvd</p>
<input type="button" value="dadada" onclick="ff()">
<input type="button" value="XIAOXIAO" onclick="ff1()">
</body>
<script>
/*
通過js的方式調用的上面的style里的.class內容
* */
function ff() {
var c = document.getElementById("pp");
c.classList.remove("smill"); //先刪除多余的
c.classList.add("big"); //添加class
}
function ff1() {
var c = document.getElementById("pp");
c.classList.remove("big");
c.classList.add("smill");
}
</script>
</html>
