前端-js中不需要记，但是要用的小知识

本文主要是介绍前端-js中不需要记，但是要用的小知识，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

三大家族

1.事件对象兼容，目前只学到这个。就用这个

model.onmousedown = function(event){var event = event || window.event;
}

2.js做拖拽特效的时候，偶尔会发生小bug。是因为移动鼠标的时候，可能会选中标签或文字

model.onmousedown = function(event){var event = event || window.event;document.onmousemove = function(event){// 如果选中了，则取消所有选中window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();var event = event || window.event;}document.onmouseup = function(){document.onmousemove = null;}
}

2-1,获取选中文本

var txt = "";
if(window.getSelection){//高级浏览器txt = window.getSelection().toString();
}else {//IE678txt = document.selection.createRange().text;
}

3.CSS三大家族-scroll家族。有兼容性，所以封装js来获取内容值。如下是获取页面已经卷动的高度或者宽度

<script type="text/javascript">
function myscroll(){if(window.pageYOffset !=null){//【IE9+和其他浏览器】均声明DTD头return{left : window.pageXOffset,top : window.pageYOffset}}if(document.compatMode=="CSS1Compat"){// 声明了DTD头// 检测是不是怪异模式浏览器，--就是没有声明<!DOCTYPE html>return {left : document.documentElement.scrollLeft,top : document.documentElement.scrollTop}}if(document.compatMode=="BackCompat"){ // 未声明return {left : document.body.scrollLeft,top : document.body.scrollTop}}return {left :0,top :0}
}
window.onscroll = function(){console.log(myscroll().top);
}
</script>

4.CSS三大家族-client家族，也有兼容性。如下是获取当前浏览器窗口的宽度高度。

可以根据页面当前宽度，调整标签样式，也可以来判断当前访问者是手机，pad还是电脑

<script type="text/javascript">function client (){if(window.innerWidth!=null){return {width:window.innerWidth,height:window.innerHeight}}if(document.compatMode=="CSS1Compat"){return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}}return {width:document.body.clientWidth,height:document.body.clientHeight}}window.onresize = function(){console.log(client().width);}
</script>

5.取消冒泡

box.onclick = function(event){var event = event || window.event;if(event && event.stopPropagation){//取消冒泡event.stopPropagation();}else{//IE 678 取消冒泡event.cancelBubble = true;}console.log("box被点击了");}
document.onclick = function(event){var event = event || window.event;var targetid = event.target? event.target.id :event.srcElement.id;if(targetid!="show"){console.log("id为show的标签不能算点击document");   }
}

6.获取标签样式属性。例：box.style.left，这种方式只能获取行内式的值。为了能获取css样式中的值，可以用如下写法

function getStyle(obj,attr){if(obj.currentStyle){return ojb.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr];}
}getStyle(box,"left");

7.for in 循环中，item的值是数组的下标，是json字符串的key，C#中item的值是数组中某变量的值

这篇关于前端-js中不需要记，但是要用的小知识的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！