Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

做一个懂UI的前端工程师
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Bom操作常用方法
    • 判读浏览器是否支持 CSS 属性
    • 检查浏览器是否支持某个css属性值(es6版)
    • 检查浏览器是否支持某个css属性值
    • 获取滚动条位置
    • 页面跳转,是否记录在 history 中
      • 方案一:
      • 方案二:
    • 滚动条回到顶部动画
    • 复制文本
      • 方案一:
    • 检测设备类型
      • 方案一: ua
      • 方案二:事件属性
    • Cookie
      • 增
      • 删
      • 查
      • 清空
  • Window对象

  • Navigator对象

  • Screen对象

  • History对象

  • Location对象

  • 存储对象

  • BOM
Ame
2020-06-24

Bom操作常用方法

# 判读浏览器是否支持 CSS 属性

/**
 * 告知浏览器支持的指定css属性情况
 * @param {String} key - css属性,是属性的名字,不需要加前缀
 * @returns {String} - 支持的属性情况
*/
function validateCssKey(key) {
	const jsKey = toCamelCase(key); // 有些css属性是连字符号形成
	if (jsKey in document.documentElement.style) {
		return key;
	}
	let validKey = "";
	// 属性名为前缀在js中的形式,属性值是前缀在css中的形式
	// 经尝试,Webkit 也可是首字母小写 webkit
	const prefixMap = {
		Webkit: "-webkit-",
		Moz: "-moz-",
		ms: "-ms-",
		O: "-o-",
	};
	for (const jsPrefix in prefixMap) {
		const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
		if (styleKey in document.documentElement.style) {
			validKey = prefixMap[jsPrefix] + key;
			break;
		}
	}
	return validKey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 检查浏览器是否支持某个css属性值(es6版)

/**
 * @param {String} key - 检查的属性值所属的css属性名
 * @param {String} value - 要检查的css属性值(不要带前缀)
 * @returns {String} - 返回浏览器支持的属性值
*/
function valiateCssValue(key, value) {
	const prefix = ["-o-", "-ms-", "-moz-", "-webkit-", ""];
	const prefixValue = prefix.map((item) => {
		return item + value;
	});
	const element = document.createElement("div");
	const eleStyle = element.style;
	// 应用每个前缀的情况,且最后也要应用上没有前缀的情况,看最后浏览器起效的何种情况
	// 这就是最好在prefix里的最后一个元素是''
	prefixValue.forEach((item) => {
		eleStyle[key] = item;
	});
	return eleStyle[key];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 检查浏览器是否支持某个css属性值

/**
 * 
 * @param {String} key - 检查的属性值所属的css属性名
 * @param {String} value - 要检查的css属性值(不要带前缀)
 * @returns {String} - 返回浏览器支持的属性值
*/
function valiateCssValue(key, value) {
	var prefix = ["-o-", "-ms-", "-moz-", "-webkit-", ""];
	var prefixValue = [];
	for (var i = 0; i < prefix.length; i++) {
		prefixValue.push(prefix[i] + value);
	}
	var element = document.createElement("div");
	var eleStyle = element.style;
	for (var j = 0; j < prefixValue.length; j++) {
		eleStyle[key] = prefixValue[j];
	}
	return eleStyle[key];
}

function validCss(key, value) {
	const validCss = validateCssKey(key);
	if (validCss) {
		return validCss;
	}
	return valiateCssValue(key, value);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 获取滚动条位置

function getScrollPosition(el = window) {
  return {
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
  };
}
1
2
3
4
5
6

# 页面跳转,是否记录在 history 中

# 方案一:

function redirect(url, asLink = true) {
  asLink ? (window.location.href = url) : window.location.replace(url);
}
1
2
3

# 方案二:

function redirect(url, asLink = true) {
  asLink ? window.location.assign(url) : window.location.replace(url);
}
1
2
3

# 滚动条回到顶部动画

方案一:

function scrollToTop() {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, scrollTop - scrollTop / 8);
  } else {
    window.cancelAnimationFrame(scrollToTop);
  }
}
1
2
3
4
5
6
7
8
9
10

# 复制文本

# 方案一:

function copy(str) {
  const el = document.createElement("textarea");
  el.value = str;
  el.setAttribute("readonly", "");
  el.style.position = "absolute";
  el.style.left = "-9999px";
  el.style.top = "-9999px";
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0
      ? document.getSelection().getRangeAt(0)
      : false;
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方案二:cliboard.js

# 检测设备类型

# 方案一: ua

function detectDeviceType() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
}
detectDeviceType()
1
2
3
4
5
6
7
8

# 方案二:事件属性

function detectDeviceType() {
  return ("ontouchstart" in window || navigator.msMaxTouchPoints)
    ? "Mobile"
    : "Desktop";
}
detectDeviceType()
1
2
3
4
5
6

# Cookie

# 增

function setCookie(key, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    key +
    "=" +
    escape(value) +
    (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
}
1
2
3
4
5
6
7
8
9

# 删

function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}
1
2
3
4
5
6
7
8

# 查

function getCookie(name) {
  var arr,
    reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if ((arr = document.cookie.match(reg))) {
    return arr[2];
  } else {
    return null;
  }
}
1
2
3
4
5
6
7
8
9

# 清空

编辑 (opens new window)
上次更新: 2021/03/31, 14:03:00
Window对象

Window对象→

最近更新
01
TypeScript类型定义
03-20
02
Typescript
03-19
03
常用兼容IE或增强浏览器的库
03-09
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式