前端小技巧總結 v1.0.0
阿新 • • 發佈：2019-02-07
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(':');