课程 \
JavaScript进阶篇
9-13 插入节点insertBefore()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var node = document.getElementsByTagName("li")[1];
var newnode = document.createElement("li");
newnode.innerHTML = "PHP" ;
otest.insertBefore(newnode,node);
</script>
</body>
</html>
2018-01-02
查看完整代码
9-15 替换元素节点replaceChild()
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var oldHTML= oldnode.innerHTML;
var newnode=document.createElement("i");
oldnode.parentNode.replaceChild(newnode,oldnode);
newnode.innerHTML=oldHTML;
}
</script>
</body>
</html>
2018-01-02
查看完整代码
9-16 创建元素节点createElement
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
var a = document.createElement('a')
a.href = url
a.innerHtml = text
a.style.color = red
main.appendChild(a)
}
// 调用函数创建链接
createa("http://www.imooc.com/","慕课网")
</script>
</body>
</html>
2018-01-02
查看完整代码
9-17 创建文本节点createTextNode
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
</body>
</html>
2018-01-02
查看完整代码
9-18 浏览器窗口可视区域大小
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
document.write("宽："+w+"<br>"+"高："+h)
</script>
</body>
</html>
2018-01-02
查看完整代码
9-19 网页尺寸scrollHeight
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
</script>
</body>
</html>
2018-01-02
查看完整代码
9-20 网页尺寸offsetHeight
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
</script>
</body>
</html>
2018-01-02
查看完整代码
首页上一页123下一页尾页