灏天阁

BOM 的多个对象实例

· Yin灏

滚动至坐标或滚动特定距离

<div id="button_block">
  <button id="scroll01">Scroll To</button>
  <button id="scroll02">Scroll By</button>
</div>
<div id="content"></div>

#button_block {
  position: fixed;
  left: 30%;
  top: 30%;
}

#content {
  background: linear-gradient(45deg, Gold, YellowGreen, RoyalBlue, Purple);
  width: 2000px;
  height: 1500px;
}

scroll01.onclick = function() {
  // x 坐标滚动到 0，y坐标滚动到 500
  // window.scroll(0, 500);
  // scrollTo(300, 500);
  window.scrollTo(300, 500);
}

scroll02.onclick = function() {
  // x 轴向右滚动 20；y 轴向下滚动 60
  // scrollBy(20, 60);
  window.scrollBy(20, 60);
}

screen 对象实例

// 获取当前设备的属性
console.log(screen.width); // 1920
console.log(screen.height); // 1080

console.log(screen.availWidth); // 1920
console.log(screen.availHeight); // 1040 去除底部状态栏的高度

console.log(screen.colorDepth); // 24
console.log(screen.pixelDepth); // 24

location 对象实例

<button id="assign_btn">Assign new URL</button>

console.log(location);
console.log(location.protocol); // "https:"
console.log(location.hostname); // "www.baidu.com"
console.log(location.port); // 8080
console.log(location.pathname); // "/s"
console.log(location.href); // "https://baijiahao.baidu.com/s?id=1704586394940230161&wfr=spider&for=pc"


assign_btn.onclick = function() {
  location.assign('http://www.tup.tsinghua.edu.cn/index.html'); // 跳转
}

- Book Lists -