1.目的
JavaScript常用內置對象
// 1. document
// document.getElementById // 通過id獲取元素
// document.getElementsByTagName // 通過標籤名獲取元素
// document.referrer // 獲取上一個跳轉頁面的地址(需要服務器環境)
// 2. location
// window.location.href // 獲取或者重定url地址
// window.location.search // 獲取地址參數
// window.location.hash // 獲取頁面錨點或者哈希值
2.示例代碼
圖片及源碼的github鏈接
017.常用內置對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>017.常用內置對象</title>
<script type="text/javascript">
// 1. document
// document.getElementById // 通過id獲取元素
// document.getElementsByTagName // 通過標籤名獲取元素
// document.referrer // 獲取上一個跳轉頁面的地址(需要服務器環境)
// 2. location
// window.location.href // 獲取或者重定url地址
// window.location.search // 獲取地址參數
// window.location.hash // 獲取頁面錨點或者哈希值
// 3.document.referrer使用參考
// window.onload = function () {
// // 儲存上一個頁面的地址
// // var sUrl = document.referrer;
// var oBtn = document.getElementById('btn1');
// oBtn.onclick = function () {
// // window.location.href = sUrl;
// window.location.href = 'http://www.baidu.com';
// }
// }
// 4.window.location.search使用參考
window.onload = function () {
var oDiv = document.getElementById('div1');
var sData = window.location.search;
if(sData !== ''){
var aRr = sData.split("="); // 以"="劃分參數
var iNum = aRr[1]; // aRr[0]爲?, aRr[1]纔是參數
if(iNum == 1){
oDiv.style.backgroundColor = 'gold';
}
else if(iNum == 2){
oDiv.style.backgroundColor = 'green';
}
else if(iNum == 0){
oDiv.style.backgroundColor = 'red';
}
else{
oDiv.style.backgroundColor = 'pink';
}
}
}
</script>
<style type="text/css">
div{
width: 200px;
height: 200px;
position: center;
top: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="button" name="" value="跳轉頁面1" id="'btn1">
<div id="div1" ></div>
<a href="017.常用內置對象.html?aa=1">金色</a>
<a href="017.常用內置對象.html?aa=2">綠色</a>
<a href="017.常用內置對象.html?aa=0">紅色</a>
<a href="017.常用內置對象.html?aa=4">粉色</a>
</body>
</html>