js添加标签和删除标签内容
2021-03-12 07:28
标签：rip htm button ntc add input body 一个 back js添加标签和删除标签内容 标签：rip htm button ntc add input body 一个 back 原文地址：https://www.cnblogs.com/TKOPython/p/12827508.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
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>Titletitle>
style>
.big{
font-size: 50px;
background-color: firebrick;
}
.smill{
font-size: 10px;
background-color: royalblue;
}
style>
head>
body>
p id="pp">vsdvdvdsvdfvdp>
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>