HTML JS CSS 網頁好用小撇步

tags: HTML CSS JavaScript

JavaScript

JS阻止冒泡和取消默认事件(默认行为)

event.stopPropagation()  //防阻捕獲及冒泡事件傳遞
event.preventDefault()   //取消默認事件

刪除cookie 如果該cookie的domain不在當下的domain 必須要把path 與 domain都設定一至才可以刪除

var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if (keys) {
    for (var i = keys.length; i--; ){
      document.cookie = keys[i] + "=0;expires=" + new Date(0).toUTCString()+";domain=??;path=??";
    }
}

img 加載錯誤預設圖片

// 圖片家載錯誤
document.addEventListener(
  "error",
  function(e) {
    var elem = e.target;
    if (elem.tagName.toLowerCase() === "img") {
      elem.src = require("./assets/img/errorImg.png");
    }
  },
  true
);

CSS

文字溢出

單行

{
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
}

兩行

{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

圖片比例不變固定div用法

.response-img {
  display: table;
  height: 200px;
}
.response-img a {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
  text-align: center;
}
.response-img a img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

垂直水平居中用法

{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

window.scrollY 抓不到時 因為height可能沒有設定成auto

body {
    height: auto;
}

img 自適應 正方形圖片div

.div{
    width:100%;
    height:0px;
    padding-bottom:100%;
    position:relative;
}
.div img{
    width:100%;
    height:100%;
    position:absolute;
}

css3 的 calc函數

calc(100vh - 10px)   //vh：視窗的相對高度

@media 使用

@media (min-width: 767px) {   //螢幕寬度在767px以上
  .page-layout-top {
		min-height: calc(100vh - 174px);
		margin-top: 130px;
  }
}

@media (max-width: 767px) {    //螢幕寬度在767px以下
  .page-layout-top {
		min-height: calc(100vh - 104px);
		margin-top: 60px;
  }
}

修飾過常的字串

.redundant_word {
    width:365px;   //長度
    overflow:hidden;   //多餘的隱藏 
    text-overflow:ellipsis;    //隱藏的部分變成...
    white-space:nowrap;      //不要自動拆行
}

取消element之間的預設空隙

{
    display: block;
    float: left;
}

img 要填滿 父div並且圖片太大時不會跑版（但是比例會跑掉）

{
    width: 100%;   //寬度百分比
    height:300px;    //高度故定
}

HTML

input type="file"無法自行決定css,可以用label把它包起來的方式

<label class="btn btn-info">
    <input id="upload_img" style="display:none;" type="file">
    <i class="fa fa-photo"></i> 上傳圖片
</label>

抓class基本上會取得數組，所以要加上index document.getElementsByClassName(…)[0]