<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<title>JS基础</title>
<style type="text/css">
div {
border: 10px solid black;
display: inline-block;
}
#shang,
#xia {
width: 100%;
background: lavender;
border: 0px;
}
#div1 {
width: 100px;
height: 100px;
}
#div2 {
width: 200px;
height: 200px;
border: 10px solid black;
}
#p1 {
font-size: 30px;
color: gold;
}
#p2 {
font-size: 50px;
color: blue;
}
.wenZi {
text-align: center;
line-height: 300px;
color: white;
font-weight: 900;
}
.beiJing {
background: red;
}
</style>
</head>
<body>
<div id="shang">
<p id="p1">p1的内容:JS基础</p>
<p id="p2">p2的内容:JS基础</p>
<div id="div1" class="beiJing">div1的内容:JS基础</div>
<div id="div2" class="wenZi beiJing">div2的内容:JS基础</div>
</div>
<div id="xia">
</div>
</body>
</html>
<script type="text/javascript">
//使用window.innerHeight获取浏览器的高度
var winHeight = window.innerHeight;
//使用document.getElementsByTagName()获取标签对象
var oDiv = document.getElementsByTagName("div");
//使用document.getElementById()获取id对象
var shang = document.getElementById("shang");
var xia = document.getElementById("xia");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
//使用document.getElementsByClassName()获取class对象
var wenZi = document.getElementsByClassName("wenZi");
var beiJing = document.getElementsByClassName("beiJing");
//通过JS修改标签的样式属性
oDiv[0].style.border = "0px";
shang.style.height = winHeight / 2 + "px";
xia.style.height = winHeight / 2 + "px";
xia.style.background = "lemonchiffon";
div1.style.width = "150px";
div1.style.height = "150px";
beiJing[1].style.background = "lightslategrey";
//修改标签引用的class名字
div1.className = "wenZi beiJing";
wenZi[0].style.lineHeight = "150px"
//使用innerHTML获取对象的内容或向对象插入内容
var p3 = document.getElementById("div2").innerHTML;
document.getElementById("p2").innerHTML = p3;
//使用document.write()写入文本,写入脚本等
document.write("<p>写入文本</p>");
//使用 console.log() 写入到浏览器的控制台
console.log("输出到控制台");
//使用 window.alert() 弹出警告框
window.alert("弹出警告框");
//使用offset获取属性值
var div1Width = div1.offsetWidth;
console.log(div1Width);
//使用document.createElement创建元素
var createP = document.createElement("p");
createP.innerHTML = "插入元素";
//使用.appendChild()添加元素
xia.appendChild(createP);
</script>
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
