BOM是什么
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
URL 如何编码解码？为什么要编码？
URL编码
encodeURI("http://book.jirengu.com/fe/前端基础/Javascript/bom.html");
// "http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/Javascript/bom.html"
encodeURIComponent("http://book.jirengu.com/fe/前端基础/Javascript/bom.html");
// "http%3A%2F%2Fbook.jirengu.com%2Ffe%2F%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%2FJavascript%2Fbom.html"
URL解码
decodeURI("http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/Javascript/bom.html");
// "http://book.jirengu.com/fe/前端基础/Javascript/bom.html"
decodeURIComponent("http%3A%2F%2Fbook.jirengu.com%2Ffe%2F%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%2FJavascript%2Fbom.html");
// "http://book.jirengu.com/fe/前端基础/Javascript/bom.html"
判断用户的浏览器类型
function isAndroid(){
return /android/i.test(window.navigator.userAgent);
}
function isIphone(){
return /iphone/i.test(window.navigator.userAgent);
}
function isIpad(){
return /ipad/i.test(window.navigator.userAgent);
}
function isIOS(){
return /os/i.test(window.navigator.userAgent);
}
如何获取元素的真实宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取真实宽高</title>
<style type="text/css">
#test{
width: 500px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="test">获取真实宽高</div>
<script type="text/javascript">
var div = document.getElementById('test');
/**
* 获取真实宽高（style里面的最初的样式） IE兼容
* @param {[type]} 元素 [element]
* @param {[type]} 伪类 [参数没有伪类设置为null]
* @return {[type]} [object CSSStyleDeclaration]
*/
function getStyle(element,pseduoClass){
// 低版本IE支持element.currentStyle();
return element.currentStyle ? element.currentStyle : window.getComputedStyle(element, pseduoClass)
}
var getWidth = getStyle(div, null).width;
var getHeight = getStyle(div, null).height;
</script>
</body>
</html>
网友评论