前端小技巧总结 v1.0.0
CSS部分
1.浮动父级塌陷
.clearFix:after{visibility: hidden;display: block;font-size: 0;content: '.';clear:both;height: 0;}
2.footer在页面底部
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
html,body{
height:100%;
}
.container{
height: 100%;
position: relative;
}
.content{
padding-bottom:60px;
}
.footer{
width: 100%;
height: 60px;
background: #ccc;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
this is header
</div>
<div class="content">
this is content
</div>
<div class="footer">
This is footer
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
3.长文本以省略号显示
以table td为例
table{
table-layout: fixed;
}
table>tbody>tr>td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; /*强制一行显示所有内容*/
}
悬浮显示
table>tbody>tr>td:hover{
overflow: visible;
white-space: normal;
}
JS部分
1.iframe 高度自适应
parent.document.all('staffList').style.height = document.body.scrollHeight + 'px';
2.textarea高度自适应
document.addEventListener("DOMContentLoaded",function(){
var elem=document.getElementById("#id");
elem.style.height = elem.style.scrollHeight + "px";
},false)
3.获取iframe里面的元素
$('iframe').contentWindow.document;
4.YYYY-MM-DD HH:MM:SS格式的日期
Number.prototype.padLeft = function(base,chr){
var len = (String(base || 10).length - String(this).length)+1;
return len > 0? new Array(len).join(chr || '0')+this : this;
}
var d = new Date,
dformat = [ (d.getMonth()+1).padLeft(),
d.getDate().padLeft(),
d.getFullYear()].join('-')+
' ' +
[ d.getHours().padLeft(),
d.getMinutes().padLeft(),
d.getSeconds().padLeft()].join(':');