时间:2021-07-01 10:21:17 帮助过:5人阅读
对于 if 语句括号里的表达式,ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值。如果值为 true,执行后面的一条语句,否则不执行。
通过arguments 对象的length属性,来智能的判断有多少参数,然后把参数进行合理的应用 。
比如,要实现一个加法运算,将所有传进来的数字累加,而数字的个数又不确定。
function box() {var sum = 0;if (arguments.length == 0) return sum; //如果没有参数,退出for(var i = 0;i < arguments.length; i++) { //如果有,就累加sum = sum + arguments[i]; }return sum; //返回累加结果 } alert(box(5,9,12));
function box(num) {if (num <= 1) {return 1; } else {return num * arguments.callee(num-1);//使用 callee 来执行自身 } }
直接接收 event 对象,是 W3C 的做法,IE 不支持,IE 自己定义了一个 event 对象,直接在 window.event 获取即可。
input.onclick = function (evt) {var e = evt || window.event; //实现跨浏览器兼容获取 event 对象 alert(e); };
W3C 中的 target 和 IE 中的 srcElement,都表示事件的目标。
function getTarget(evt) {var e = evt || window.event;return e.target || e.srcElement; //兼容得到事件目标 DOM 对象} document.onclick = function (evt) {var target = getTarget(evt); alert(target); };
在阻止冒泡的过程中,W3C 和 IE 采用的不同的方法,那么我们必须做一下兼容。
function stopPro(evt) {var e = evt || window.event; window.event ? e.cancelBubble = true : e.stopPropagation(); }
function preDef(evt) {var e = evt || window.event;if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }
当我们右击网页的时候,会自动出现 windows 自带的菜单。那么我们可以使用 contextmenu 事件来修改我们指定的菜单,但前提是把右击的默认行为取消掉。
function addEvent(obj, type, fn) { //添加事件兼容if (obj.addEventListener) { obj.addEventListener(type, fn); } else if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } }function removeEvent(obj, type, fn) { //移除事件兼容if (obj.removeEventListener) { ob j.removeEventListener(type, fn); } else if (obj.detachEvent) { obj.detachEvent('on' + type, fn); } } addEvent(window, 'load', function () {var text = document.getElementById('text'); addEvent(text, 'contextmenu', function (evt) {var e = evt || window.event; preDef(e);var menu = document.getElementById('menu'); menu.style.left = e.clientX + 'px'; menu.style.top = e.clientY + 'px'; menu.style.visibility = 'visible'; addEvent(document, 'click', function () { document.getElementById('myMenu').style.visibility = 'hidden'; }); }); });
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat。
BackCompat:标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;
CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
例如:
function getViewport(){ if (document.compatMode == "BackCompat"){ return { width: document.body.clientWidth, height: document.body.clientHeight } } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } }
function getStyle(element, attr) {if (typeof window.getComputedStyle != 'undefined') {//W3Creturn window.getComputedStyle(element, null)[attr]; } else if (typeof element.currentStyle != 'undeinfed') {//IEreturn element.currentStyle[attr]; } }
标准浏览器支持 insertRule, IE低版本则支持 addRule。
//跨浏览器获取视口大小function getInner() {if (typeof window.innerWidth != 'undefined') { //IE8及以下undefinedreturn { width : window.innerWidth, height : window.innerHeight } } else {return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } }
以上就是web前端的知识分享的详细内容,更多请关注Gxl网其它相关文章!