-
scrollHeight和scrollWidth,獲取網(wǎng)頁(yè)內(nèi)容高度和寬度。
一、針對(duì)IE、Opera:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
二、針對(duì)NS、FF:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度,不過(guò)最小值是 clientHeight。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí),scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
? || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
? || document.body.scrollHeight;注意:區(qū)分大小寫(xiě)
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
查看全部 -
瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動(dòng)條)的方法:
一、對(duì)于IE9+、Chrome、Firefox、Opera 以及 Safari:
?? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
?? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對(duì)于 Internet Explorer 8、7、6、5:
?? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
?? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽
?? document.body.clientHeight
?? document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案:
var w= document.documentElement.clientWidth ? ? ? || document.body.clientWidth;?
var h= document.documentElement.clientHeight ? ? ? || document.body.clientHeight;
查看全部 -
JavaScript?創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為。 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。
比如說(shuō),當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時(shí),就發(fā)生一個(gè)鼠標(biāo)單擊(onclick)事件,需要瀏覽器做出處理,返回給用戶一個(gè)結(jié)果。
查看全部 -
<!DOCTYPE html>
<html>
?<head>
? <title> new document </title>??
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">?
??
? ? ? window.onload = function(){
? ? ? ? ??
? ? ?// 鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
? ? ? ? var rowNum = document.getElementsByTagName("tr");?
for(var i=0;i<=rowNum.length;i++){
? ? bgcChange(rowNum[i]);
? ? /*rowNum[i].onmouseover = function(){
? ? ? ? rowNum[i].style.backgroundColor = "#f2f2f2";}
? ? rowNum[i].onmouseout = function(){
? ? ? ? rowNum[i].style.backgroundColor = "#fff";
? ? }*/
}
? ? ?
? ? ? }
?
function bgcChange(obj)
? ? ?{
? ? ? ? obj.onmouseover=function(){
? ? ? ? ? ? obj.style.backgroundColor="red";
? ? ? ? }
? ? ? ? obj.onmouseout=function(){
? ? ? ? ? ? obj.style.backgroundColor="#fff";
? ? ? ? }
}
?
?
?
?
? ? ?
? ? ? // 編寫(xiě)一個(gè)函數(shù),供添加按鈕調(diào)用,動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn);
? ? function addrow(){
? ? ? ? var m=2;
? ? ? ? m++;
? ? ? ? var newnode = document.createElement("tr");
? ? ? ? var td1 = document.createElement("td");
? ? ? ? td1.innerHTML = "xh00"+m;
? ? ? ? var td2 = document.createElement("td");
? ? ? ? td2.innerHTML = "小雷";
? ? ? ? var td3 = document.createElement("td");
? ? ? ? td3.innerHTML = "刪除";
? ? ? ? var tabnode = document.getElementById("table");
? ? ? ? tabnode.appendChild(newnode);
? ? ? ? newnode.appendChild("td1");
? ? ? ? newnode.appendChild("td2");
? ? ? ? newnode.appendChild("td3");
? ? ? ? var tr = document.getElementsByTagName("tr");
? ? ? ? for(var i=0; i<tr.length;i++){
? ? ? ? ? ? bgcChange(tr[i]);
? ? ? ? }
? ? }
? ? ?
? ?
??
? ? ?// 創(chuàng)建刪除函數(shù)
? ? function remove(obj){
? ? ? ? var t1 = obj.parentNode.parentNode;
? ? ? ? t1.parentNode.removeChild(tr);
? ? }?
? </script>?
?</head>?
?<body>?
? ?<table border="1" width="50%" id="table">
? ?<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>操作</th>
? ?</tr>??
? ?<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="remove(this);">刪除</a></td>? ?<!--在刪除按鈕上添加點(diǎn)擊事件? -->
? ?</tr>
? ?<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a href="javascript:remove();" >刪除</a></td>? ?<!--在刪除按鈕上添加點(diǎn)擊事件? -->
? ?</tr>??
? ?</table>
? ?<input type="button" value="添加一行"? onclick="addrow()" />? ?<!--在添加按鈕上添加點(diǎn)擊事件? -->
?</body>
</html>
查看全部 -
<b id="oldnode">JavaScript</b>
var?oldnode = document.getElementById("oldnode");? ?//拿到的是文本結(jié)點(diǎn)JavaScript
查看全部 -
獲取網(wǎng)頁(yè)對(duì)象:var conobj = document.getElementById();
彈框確認(rèn):comfirm();
彈框帶輸入值:prompt();
清楚對(duì)象CSS:conobj.removeAttribute();
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ? ? *{margin:0;padding:0;font:normal 12px "微軟雅黑";color:#000000;}
? ? ? ? ul{list-style-type: none;}
? ? ? ? a{text-decoration: none;}
? ? ? ? #tab-list{
? ? ? ? ? ? width:275px;
? ? ? ? ? ? height: 190px;
? ? ? ? ? ? /* 上下20 左右居中 */
? ? ? ? ? ? margin:20px auto;?
? ? ? ? }
? ? ? ? #ul1{
? ? ? ? ? ? border-bottom: 2px solid #8B4513;
? ? ? ? ? ? height:32px;
? ? ? ? }
? ? ? ? #ul1 li{
? ? ? ? ? ? /* 塊元素 排位一行 */
? ? ? ? ? ? display:inline-block;
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border:1px solid #999;
? ? ? ? ? ? border-bottom: none;
? ? ? ? ? ? margin-left: 5px;
? ? ? ? }
? ? ? ? #ul1 li:hover{
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? #ul1 li.active{
? ? ? ? ? ? border-top:2px solid #8B4513;
? ? ? ? ? ? border-bottom:3px solid #FFFFFF;
? ? ? ? }
? ? ? ? #tab-list div{
? ? ? ? ? ? border: 1px solid #7396B8;
? ? ? ? ? ? border-top: none;
? ? ? ? }
? ? ? ? #tab-list div li{
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? text-indent: 8px;
? ? ? ? }
? ? ? ? .show{display: block;}
? ? ? ? .hide{display: none;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload=function(){
? ? ? ? ? ? var oul=document.getElementById("ul1");
? ? ? ? ? ? var nli=oul.getElementsByTagName("li");
? ? ? ? ? ? var odiv=document.getElementById("tab-list");
? ? ? ? ? ? var ndiv=odiv.getElementsByTagName("div");
? ? ? ? ? ? for(var i=0;i<nli.length;i++){
? ? ? ? ? ? ? ? nli[i].index=i;
? ? ? ? ? ? ? ? nli[i].onclick=function(){
? ? ? ? ? ? ? ? ? ? for(var m=0;m<nli.length;m++){
? ? ? ? ? ? ? ? ? ? ? ? nli[m].className="";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.className="active";
? ? ? ? ? ? ? ? ? ? for(var j=0;j<ndiv.length;j++){
? ? ? ? ? ? ? ? ? ? ? ? ndiv[j].className="hide"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ndiv[this.index].className="show";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
? ? <div id="tab-list">
? ? ? ? <ul id="ul1">
? ? ? ? ? ? <li class="active">房產(chǎn)</li>
? ? ? ? ? ? <li>家居</li>
? ? ? ? ? ? <li>二手房</li>
? ? ? ? </ul>
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="javascript:;">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="hide">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>? ??
? ? ? ? <div class="hide">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="javascript:;">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</a></li>
? ? ? ? ? ? ? ? <li><a href="javascript:;">獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
?
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
?<head>
? <title> new document </title>??
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">?
??
? ? ? window.onload = function(){? ? ? ??
? ? ?// 鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
? ? ? ? var trArr=document.getElementsByTagName("tr");
for(var i=0;i<trArr.length;i++){
? ? changeColor(trArr[i]);
}
}
?
function changeColor(obj){
? ? ? ? obj.onmouseover=function(){
? ? ? ? ? ? obj.style.backgroundColor="#f2f2f2";
? ? ? ? }
? ? ? ? obj.onmouseout=function(){
? ? ? ? ? ? obj.style.backgroundColor="#fff";
? ? ? ? }
? ? }
? ? ?var num=2;
? ? ?
? ? ? // 編寫(xiě)一個(gè)函數(shù),供添加按鈕調(diào)用,動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn);
? ? ?function add(){
? ? ? ? num++;
? ? ? ? var numNew=num;
? ? ? ? if(num<10){
? ? ? ? ? ? numNew="00"+num;
? ? ? ? }else if(num<100){
? ? ? ? ? ? numNew="0"+num;
? ? ? ? }
? ? ? ? var tr=document.createElement("tr");
? ? ? ? var xh=document.createElement("td");
? ? ? ? var mc=document.createElement("td");
? ? ? ? var del=document.createElement("td");
? ? ? ? xh.innerHTML="xh"+numNew;
? ? ? ? mc.innerHTML="第"+num+"個(gè)學(xué)生";
? ? ? ? del.innerHTML='<a href="javascript:;" onclick="del(this)">刪除</a>';
? ? ? ? tr.appendChild(xh);
? ? ? ? tr.appendChild(mc);
? ? ? ? tr.appendChild(del);
? ? ? ? var parent=document.getElementById("table");
? ? ? ? parent.appendChild(tr);
? ? ? ? var trArr=document.getElementsByTagName("tr");
? ? ? ? for(var i=0;i<trArr.length;i++){
? ? ? ? ? ? changeColor(trArr[i]);
? ? ? ? }
? ? ?}
? ?
? ? ?
? ? ?// 創(chuàng)建刪除函數(shù)
? ? function del(obj){
? ? ? ? var tr=obj.parentNode.parentNode;
? ? ? ? tr.parentNode.removeChild(tr);
? ? }?
? </script>?
?</head>?
?<body>?
? ?<table border="1" width="50%" id="table">
? ?<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>操作</th>
? ?</tr>??
? ?<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="del(this)">刪除</a></td>? ?<!--在刪除按鈕上添加點(diǎn)擊事件? -->
? ?</tr>
? ?<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a href="javascript:;" onclick="del(this);">刪除</a></td>? ?<!--在刪除按鈕上添加點(diǎn)擊事件? -->
? ?</tr>??
? ?</table>
? ?<input type="button" value="添加一行" onclick="add()" />? ?<!--在添加按鈕上添加點(diǎn)擊事件? -->
?</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</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 eleTextNode=document.createTextNode("I love JavaScript!");
? ? element.appendChild(eleTextNode);
? ? document.body.appendChild(element);
</script>?
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
? <div><b id="oldnode">JavaScript</b>是一個(gè)很常用的技術(shù),為網(wǎng)頁(yè)添加動(dòng)態(tài)效果。</div>
? <a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
??
? ? <script type="text/javascript">
? ? ? function replaceMessage(){
? ? ? ? var oldNode=document.getElementById("oldnode");
? ? ? ? var newNode=document.createElement("i")
? ? ? ? newNode.innerHTML="HTML";
? ? ? ? // var newNodeText=document.createTextNode("HTML");
? ? ? ? // newNode.appendChild(newNodeText)
? ? ? ? oldNode.parentNode.replaceChild(newNode,oldNode)
? ?
? ? ? ?}? ??
? </script>
??
?</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div id="content">
? <h1>html</h1>
? <h1>php</h1>
? <h1>javascript</h1>
? <h1>jquery</h1>
? <h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
? var content=document.getElementById("content");
? // 在此完成該函數(shù)
? ? // 刪除某個(gè)??
? var delNode=content.childNodes[3];
? content.removeChild(delNode);
? ? // 刪除全部
//? ?for(var i=0;i<content.childNodes.length;i++){
//? ? ? ?if(content.childNodes[i].nodeType !=1){
//? ? ? ? ? ?continue;??
//? ? ? ?}else{
//? ? ? ? ? ?content.removeChild(content.childNodes[i])
//? ? ? ?}
//? ?}
??
}
</script>
<button onclick="clearText()">清除節(jié)點(diǎn)內(nèi)容</button>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">? ?
? ? ? ? ? ? <li id="a">javascript</li>? ?
? ? ? ? ? ? <li id="b">jquery</li>? ?
? ? ? ? ? ? <li id="c">html</li>? ?
? ? ? ? </ul>? ?
? ? ? ? <ul id="u2">? ?
? ? ? ? ? ? <li id="d">css3</li>? ?
? ? ? ? ? ? <li id="e">php</li>? ?
? ? ? ? ? ? <li id="f">java</li>? ?
? ? ? ? </ul>? ?
<script type="text/javascript">
? ? function get_nextSibling(n){
? ? ? ? var x=n.nextSibling;
? ? ? ? while (x && x.nodeType!=1){
? ? ? ? ? ? x=x.nextSibling;
? ? ? ? }
? ? ? ? return x;
? ? }
? ? var x=document.getElementsByTagName("li")[1];
? ? document.write(x.nodeName);
? ? document.write(" = ");
? ? document.write(x.innerHTML);
? ??
? ? var y=get_nextSibling(x);
? ??
? ? if(y!=null){
? ? ? ? document.write("<br />nextsibling: ");
? ? ? ? document.write(y.nodeName);
? ? ? ? document.write(" = ");
? ? ? ? document.write(y.innerHTML);
? ? }else{
? ? ? document.write("<br>已經(jīng)是最后一個(gè)節(jié)點(diǎn)");? ? ??
? ? }
? ??
? ? function get_previousSibling(n){
? ? ? ? var x=n.previousSibling;
? ? ? ? if(x && x.nodeType!=1){
? ? ? ? ? ? x=x.previousSibling;
? ? ? ? }
? ? ? ? return x;
? ? }
? ? var d=document.getElementsByTagName("li")[4];
? ? var z=get_previousSibling(d);
? ? ?document.write(z);
? ? if(z != null){
? ? ? ? document.write("<br />previousSibling: ");
? ? ? ? document.write(z.nodeName);
? ? ? ? document.write(" = ");
? ? ? ? document.write(z.innerHTML);
? ? }else{
? ? ? ? document.write("<br>已經(jīng)是第一個(gè)節(jié)點(diǎn)");? ?
? ? }
</script>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
? <ul>?
? ? ? <li id="tcon"> 基礎(chǔ)語(yǔ)法</li>
? ? ? <li>流程控制語(yǔ)句</li>
? ? ? <li>函數(shù)</li>
? ? ? <li>事件</li>
? ? ? <li>DOM</li>
? </ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS?
? <ul>
? ? <li>文字</li>
? ? <li>段落</li>
? ? <li>表單</li>
? ? <li>表格</li>??
? </ul>?
</li></ul>??
<script? type="text/javascript">? ??
? ?var mylist = document.getElementById("tcon");?
? ?document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML)
</script>?
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div>
? javascript??
? <p>javascript</p>
? <div>jQuery</div>
? <h5>PHP</h5>
</div>
<script type="text/javascript">
?var divELe=document.getElementsByTagName('div')[0].childNodes;
?for(var i=0;i<divELe.length;i++){
? ? document.write("第"+(i+1) +"個(gè)元素"+"<br/>");
? ? document.write("名字"+divELe[i].nodeName+"<br/>");
? ? document.write("值"+divELe[i].nodeValue+"<br/>");
? ? document.write("類型"+divELe[i].nodeType+"<br/><br/>");
? ??
?}
?
?
</script>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
? <p id="intro">我的課程</p>??
? <ul>??
? ? <li title="JS">JavaScript</li>??
? ? <li title="JQ">JQuery</li>??
? ? <li title="">HTML/CSS</li>??
? ? <li title="JAVA">JAVA</li>??
? ? <li title="">PHP</li>??
? </ul>??
? <h1>以下為li列表title的值,當(dāng)title為空時(shí),新設(shè)置值為"WEB前端技術(shù)":</h1>
<script type="text/javascript">
? var Lists=document.getElementsByTagName("li");
? for (var i=0; i<Lists.length;i++)
? {
? ? var text=Lists[i].getAttribute("title");
? ? document.write(text +"<br>");
? ? if(text=="")
? ? {
? ? Lists[i].setAttribute("title","WEB前端技術(shù)")
? ? document.write(Lists[i].getAttribute("title")+"<br>");
? ? }
? }
</script>
</body>
</html>
查看全部
舉報(bào)