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

tl110110tl

已于 2022-06-27 21:48:08 修改

阅读量775

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-01 14:07:46 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123896286

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

三大家族

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 {
    //IE678
	txt = 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的值是数组中某变量的值