前端小技巧

前端小技巧

一、网页各种宽高

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

 

IE

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop ==> 浏览器滚动部分高度
document.body.scrollTop ==>始终为0
document.documentElement.clientHeight ==>浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop==> 始终为0
document.body.scrollTop==>浏览器滚动部分高度
document.documentElement.clientHeight ==> 浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

 

二、超出部分省略号

1、单行文本的溢出显示省略

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

 

2、多行文本的溢出显示省略

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

 

3、数字、字母换行

word-break:break-all;

word-wrap:break-word;

 

4、js转换成百分数保留两位小数

var str=Number(data*100).toFixed(2);

str+="%";

 

5、鼠标滑过一个div，如何控制另一个div

$(".nav_li").hover(function () {
　　$(".div_tip").show();
}, function () {
　　$(".div_tip").hide();
})

 

6、css实现div只有四个角有边框

.style {
width: 100px;
height: 100px;

background: linear-gradient(to left, #4ce2ff, #4ce2ff) left top no-repeat,
linear-gradient(to bottom, #4ce2ff, #4ce2ff) left top no-repeat,
linear-gradient(to left, #4ce2ff, #4ce2ff) right top no-repeat,
linear-gradient(to bottom, #4ce2ff, #4ce2ff) right top no-repeat,
linear-gradient(to left, #4ce2ff, #4ce2ff) left bottom no-repeat,
linear-gradient(to bottom, #4ce2ff, #4ce2ff) left bottom no-repeat,
linear-gradient(to left, #4ce2ff, #4ce2ff) right bottom no-repeat,
linear-gradient(to left, #4ce2ff, #4ce2ff) right bottom no-repeat;
background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;

}

 

7、网页滚动条定位到页面顶端

Javascript: parent.window.scrollTo(0, 0);

 

8、替换字符串指定位数

var aae005 = data.aab004Map.aae005;
aae005 = aae005.substring(0,3) + "****" + aae005.substring(7);

 

9、Javascript刷新页面的几种方法

（1） history.go(0)   
（2）location.reload()   

//“后退”
function   back()  {     
    window.history.back()     
}     

//“前进”
function   forward() {     
    window.history.forward()     
}    

 

10、截取字符串中的汉字

var _name = params.seriesName;
var reg = new RegExp('[\u4e00-\u9fa5]+$', 'g');
_name = _name .match(/[\u4e00-\u9fa5]/g).join("");

 

11、鼠标滑过展示数据

$(".map_icon_div").hover(
    function () {
        $(this).find(".map_icon_val").css('display','block')
    },
    function () {
        $(this).find(".map_icon_val").css('display','none')
    }
);