文档对象 DOM

设置浏览器文档的标题

/**
 * 设置文档显示标题
 * @param {string} title 文档标题
 * @param {function} callBack 回调函数
 */
export function setDocumentTitle(title, callBack=()=>{}){
    document.title = title
    if(typeof callBack === 'function'){
        // 例如h5与app交互 改变title发送消息给app
        callBack()
    }
}

判断当前位置是否为页面底部

• 返回值为true/false

function bottomVisible() {
  return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
}

判断元素是否在可视范围内

• partiallyVisible为是否为完全可见

function elementIsVisibleInViewport(el, partiallyVisible = false) {
  const {top, left, bottom, right} = el.getBoundingClientRect()

  return partiallyVisible ?
    ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
    ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
    top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
}

获取元素css样式

function getStyle(el, ruleName) {
  return getComputedStyle(el, null).getPropertyValue(ruleName)
}

进入全屏

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}

launchFullscreen(document.documentElement)
launchFullscreen(document.getElementById("id")) //某个元素进入全屏

退出全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

exitFullscreen()

全屏事件