問題解決合集

時間  2019-11-20
標籤 問題 解決 合集 简体版
原文   原文鏈接

會持續更新

歡迎一塊兒探討，若是有寫的不許確或是不正確的地方，歡迎你們指出來~

或者有更好的解決辦法也能夠提出來~

略長，建議直接搜關鍵字/詞

若是沒有你想要的內容，能夠點這裏去評論，或者發短消息給我，後續會繼續補充

HTML：

CSS：

  • IE透明度：

    opacity:0.8;
filter:Alpha(opacity=80); /* 0-100 */

  • 清除浮動

    .clearfix:after{
   content: '';
   display: block;
   clear: both;
   height:0;
   visibility:hidden;
}
.clearfix{
   *zoom: 1; /* 僅對ie67有效，zoom:1觸發hasLayout,起到相似BFC的效果 */
}

  • 過渡效果：

    /* 全部元素都加過渡效果 */
*{
  transition: all 1s;
}

/* 除了 .tab選擇器 外所有加過渡效果 */
*:not(.tab){
  transition: all 1s;
}

  • 兩個行內元素不對齊的問題解決

    兩個行內元素不對齊的問題解決：

    1. vertical-align:middle;
    2. float
    3. 基線沒對齊

  • 垂直居中或水平居中一些問題

    PS：

  • 補充

    塊狀元素與內聯（行內）元素的嵌套規則：https://www.cnblogs.com/jizhongjing/p/4887948.html

    Html中行內元素有哪些？塊級元素有哪些？：https://www.cnblogs.com/Jackie0714/p/4923639.html

    行內元素：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente

    塊級元素：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements

    • 行內元素
      （對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間）
      （行內元素只能包含行內元素，不能包含塊級元素）

      a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、（font）、i、img、input、kbd、label、map、object、q、（s、）samp、script、select、small、span、（strike、）strong、sub、sup、textarea、tt、（u、）var

      PS：
      使用 span、img、input和em 測試發現：
      其中span和em只能夠設置左右margin，img和input四個方向的margin都生效
      以上四個元素四個方向的padding都生效。
      設置寬高值，img和input會生效，span和em無效果。

    • 塊級元素
      （margin和padding的上下左右均對其有效）
      （塊級元素中能夠包含塊級元素和行內元素）
      （有幾個特殊塊級元素只能包含內聯元素，不能包含塊級元素。這幾個特殊標籤是 h1~h六、p、dt）
      （包含的元素：塊級元素與塊級元素並列；內聯元素與內聯元素並列）

      address、article、aside、audio、blockquote、canvas、（center、）dd、（dir、）div、dl、（dt、）fieldset、figcaption、gigure、footer、form、h1~h六、header、hgroup、hr、（isindex、li、marquee、menu、noframes、）noscript、ol、output、p、pre、section、table、tfoot、ul、video

  • 垂直居中

    使用margin / padding來填充的話，不必定是居中的，還須要設置寬 / 高

    /* 全部元素指代（行內元素，行內塊級元素，塊級元素） */
/* 行內元素使用span、img、input、em測試 */
/* 行內塊級使用span、img、input、em、p、div、h一、pre元素測試 */
/* 塊級元素使用p、div、h一、pre測試 */

/* input的文字會居中是由於input元素自己有垂直居中效果 */

/* 第1種，行內元素 和 行內塊級元素 */
/* 以子元素中高度最大的那個元素爲基準垂直居中 */
children{
    vertical-align:middle;
}
/* 如圖（h1有margin） */


    /* 第2種，全部元素 有兼容性問題 */
parent{
    display:flex;
}
children{
    align-self:center;
}

/* 第3種 全部元素 不設置高度 有兼容性問題 */
/* transform: translateY(-50%);top: 50%; 而且相對父元素絕對定位 */
parent{
    position:relative;
}
children{
    position:absolute;
    transform:translateY(-50%);
    top: 50%;
}

/* 同理 translate(0, -50%);top:50%; 也能夠 */
parent{
    position:relative;
}
children{
    position:absolute;
    transform:translate(0, -50%);
    top: 50%;
}

/* 第4種 全部元素 須要設置高度 */
/* margin-top: 負的元素的高度的一半;top: 50%; 而且相對父元素絕對定位 */
parent{
    position:relative;
}
children{
    position:absolute;
    margin-top: 負的的元素的高度的一半;
    top: 50%;
}

/* 第5種 */
/* 父元素：line-height值等於父元素的height */
/* 行內img元素無效果，input，span和em等正常 */
/* 行內塊級img元素無效果，input，span和em等正常 */
/* 塊級元素高度變爲line-height的值 */
parent{
    line-height: 父元素的高度;
}

/* 父元素：line-height值等於父元素的height 子元素：vertical-align: middle;*/
/* 行內元素 和 行內塊級元素 正常 */
/* 塊級元素高度變爲line-height的值 */
parent{
    line-height: 父元素的高度;
}
children{
    vertical-align: middle;
}

/* 子元素：line-height值等於父元素的height */
/* 行內img元素無效果，input的高度變爲line-height的值，span和em等正常 */
/* 行內塊級img元素無效果，input的高度變爲line-height的值，span和em等正常 */
/* 塊級元素高度變爲line-height的值 */
children{
    line-height: 父元素的高度;
}

/* 第6種 行內元素，行內塊級元素 */
/* img元素無效果 */
parent:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

/* 第7種  */
/* 相對父元素絕對定位 */
/* 未添加寬高時：只有img生效，其餘都是佔滿父元素高度 */
/* 添加寬高後：全部元素生效 */
parent{
    position:relative;
}
children{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 第8種 */
#parent {
    height: 250px;
}
#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#child {
    clear: both;
    height: 100px;
}
    <div id="parent">
  <div id="floater"></div>
  <div id="child">Content here</div>
</div>
    /* 第9種 */
/* 全部元素 */
/* 父元素寬度會變成最小的寬度 */
/* 行內元素被擠壓； */
/* 都改成相同的行內元素時，發現img會換行，input無效果，(被擠壓的緣由)；span和em正常。 */
parent{
    display:table;
}
children{
    display:table-cell;
    vertical-align: middle;
}

/* 第10種 有兼容性問題 */
/* 寬度爲父元素的寬度 而且 元素彙集在垂直方向中間 */
parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* 第11種 */
/* 行內元素 行內塊級元素，除了img */
/* 塊級元素會被擠壓下去 */
/* 並不是真正意義的居中  */
parent:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* 如圖： */



    第12種：


    來自https://www.w3cplus.com/css/vertically-center-content-with-css

  • 水平居中

    使用margin / padding來填充的話，不必定是居中的，還須要設置寬 / 高

    /* 第一種 全部元素 文字居中 */
/* text-align:center; */
/* 父元素 或 子元素使用均可以 */

/* 第二種 塊級元素 並設置寬度 */
/* margin: 0 auto; */

/* 第三種 全部元素 */
/* 有兼容性問題 */
/* transform: translateX(-50%);left:50%; 相對父元素絕對定位 */
parent{
    position:relative;
}
children{
    position:absolute;
    transform: translateX(-50%);
    left:50%;
}

/* 同理 translate(-50%, 0); 也能夠*/
/* 有兼容性問題 */
parent{
    position:relative;
}
children{
    position:absolute;
    transform: translate(-50%, 0);
    left:50%;
}

/* 同理 margin-left爲負的元素寬度的一半 須要設置寬度 也能夠 */
parent{
    position:relative;
}
children{
    position:absolute;
    margin-left:負的元素寬度的一半;
    left:50%;
}

/* 第四種 全部元素 有兼容性問題 */
/* 子元素高度爲父元素高度，水平居中（相似於第一種的居中） */
parent{
    display: flex;
    justify-content: center;
}

/* 第五種 有兼容性問題 */
/* 垂直居中（此居中非彼居中） 而且 水平居中（相似於第一種的居中） */
parent{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
}

    更多：六種實現元素水平居中：https://www.w3cplus.com/css/elements-horizontally-center-with-css.html

  • 垂直 + 水平居中：（除了以上兩種一塊兒設置外）

    /* 第一種 */
/* 未知時，只有img元素生效 */
/* 已知高度和寬度，全部元素生效 */
parent{
    position:relative;
}
el{
  margin: auto; 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
}

    position:fixed; top: 0; right: 0; bottom: 0; left: 0;是什麼意思？：https://segmentfault.com/q/1010000002408932

    /* 第二種 有兼容性問題 */
parent{
    display:grid;
}
children{
    margin:auto;
}

  • （平均）佔滿位置

    /* 第一種 寬度會變，各個佔1/n ，有兼容性問題 */
parent{
    display:flex;
}
children{
    flex:1;
}

/* 第二種 原寬度，margin來填充；有兼容性問題 */
/* 子元素的margin爲0 auto;時，水平方向佔滿 */
/* 子元素的margin爲auto;時，水平方向佔滿 而且 垂直居中 */
parent{
    display:flex;
}
children{
    margin:auto;
}

  • 使用CSS僞元素模擬float:center效果


    使用CSS僞元素模擬float:center效果：http://www.w3cplus.com/css/float-center.html

  • 置頂頁腳（Sticky Footer）

    置頂頁腳（Sticky Footer）：https://www.w3cplus.com/css/pure-css-create-equal-height-column-layout-and-certical-horizontal-centers-and-sticky-footer.html

  • html高度塌陷問題解決

    html高度塌陷問題解決：https://www.cnblogs.com/devilgod/archive/2018/09/17/9660314.html

  • flex佈局

    flex佈局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  • 修改placeholder樣式：
    修改placeholder樣式

  • 進度條 （使用的是原生h5的<input type="range">）

    /*橫條樣式*/
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background-size: 100%;
  height: 12px;
  border-radius: 100px;
  border: none;
  /*橫條背景顏色，不須要顯示已拖動的位置的話使用這個*/
  background: #e6e6e6;

  /* 須要顯示已拖動的位置的話，使用這個 */
  background: -webkit-linear-gradient(#BC8BF4, #BC8BF4) no-repeat, #e6e6e6;
  /* 設置已拖動的部分的顏色爲 #BC8BF4，未拖動的部分的顏色爲 #e6e6e6 */
  background-size: 0% 100%; 
  /* 動態修改background-size便可 */
  /* 前面的值表明已拖動的位置，後面的值表明總長度 */
}
/*拖動塊的樣式*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border: none;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 #C1C1C1;
}

  • 遮罩層（拖動遮罩層，也能拖動到頁面）

    遮罩層顯示時，給body元素加overflow:hidden;；遮罩層隱藏時，去掉該樣式便可解決。

JavaScript：

  • 獲取本週的日期：

    這裏的目的是取日期，不取時間。週一到週日。

    var day = new Date();
var num = day.getDay();
var first = day.setDate(day.getDate() - num + 1);
var last = day.setDate(day.getDate() + 7 - num + 1);
console.log('本週',first,last); // 本週 1536572620051 1537004620051

  • 格式化日期：

    （能夠封裝成函數，使用replace來對應替換，如：格式傳入的是HH:mm，處理的hour就對應的替換HH，處理的minute就對應的替換mm）

    // padStart是es6的語法
var date = new Date();

var year = date.getFullYear();
var month = (date.getMonth()+1+'').padStart(2,0);
var day = (date.getDate()+'').padStart(2,0);
var hour = (date.getHours()+'').padStart(2,0);
var minute = (date.getMinutes()+'').padStart(2,0);
var second = (date.getSeconds()+'').padStart(2,0);
console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); // 2018-09-12 17:43:26

// ----
// 不使用padStart的方式
var date = new Date();

var year = date.getFullYear();
var month = ('00'+(date.getMonth()+1)).slice(-2);
var day = ('00'+(date.getDate())).slice(-2);
var hour = ('00'+(date.getHours())).slice(-2);
var minute = ('00'+(date.getMinutes())).slice(-2);
var second = ('00'+(date.getSeconds())).slice(-2);
console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); // 2018-09-14 15:29:41

  • 低版本IE添加onclick事件獲取不到event時，使用遍歷給每一個對象添加事件（並解決index的問題）：

    補充：IE經過window.event獲取事件對象

    var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i++ ){
    (function (n){
        lis[n].onclick = function(){
            console.log( i + '-' + n );
        };
    }(i));
}

  • 獲得某個子元素是父元素第幾個元素（獲取索引index）

    PS：如下的兼容性能夠經過：
    「獲取上一個兄弟節點」能夠經過getIndex獲取當前的索引加一，須要判斷是否大於children的長度-1；
    「獲取下一個兄弟節點」能夠經過getIndex獲取當前的索引減一，須要判斷是否小於0；
    「獲取第一個兄弟節點」對應0；
    「獲取最後一個兄弟節點」對應children的長度-1；

    function getIndex(target){
  var allChild=target.parentNode.children;
  var index;
  for(var i=0;i<allChild.length;i++){
    if(target==allChild[i]){
      index=i;
      break;
    }
  }
  return index;
}

  • 高版本IE的onclick事件，能夠委託父元素上。

    parent.onclick=function(event){
  if(event.target.nodeName=='LI'&&event.target.className!='active'){
    console.log(getIndex(event.target))
  }
}

  • 使用let解決遍歷添加事件index錯誤的問題（在遍歷內使用let保存值，不是將遍歷裏的var改爲let）

    var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i++ ){
    let n = i;
    lis[n].onclick = function(){
        console.log( i + '-' + n );
    };
}

  • 使用let解決定時器遍歷問題（將var改爲let便可）

    for(var i = 0;i<3;i++){
    setTimeout(function(){
        console.log(i)
    },i)
}

  • 低版本IE不支持getElementsByClassName：

    function getByClassName(from,name){
  from=from||document;
  if(from.getElementsByClassName){
    return from.getElementsByClassName(name);
  }else{
    var tag=from.getElementsByTagName('*');
    var child=[];
    for(var i=0;i<tag.length;i++){
      if(tag[i].className.indexOf(name)!=-1){
        child.push(tag[i]);
      }
    }
    if(child.length==0){
      child=null;
    }
    return child;
  }
}
getByClassName(parent,'child-class');
getByClassName(null,'child-class');

  • 獲取窗口/屏幕的寬/高信息：

    比較全的屏幕信息：https://www.cnblogs.com/hiuman/p/7347390.html

  • babel-polyfill

    使用了MV*框架的話，可使用babel-polyfill，（在入口文件中引入），讓IE支持es6

  • 獲取上傳的文件對象

    document.getElementById(id).files[0]

  • 獲取當前訪問的瀏覽器

    var u_agent = navigator.userAgent;
  var browser_name='Failed to identify the browser';
  if(u_agent.indexOf('Firefox')>-1){
    browser_name='Firefox';
  }else if(u_agent.indexOf('Chrome')>-1){
    browser_name='Chrome';
  }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
    browser_name='IE11';
  }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
    browser_name='IE(8-10)';
  }else if(u_agent.indexOf('MSIE')>-1){
    browser_name='IE(6-7)';
  }else if(u_agent.indexOf('Opera')>-1){
    browser_name='Opera';
  }else if(window.navigator.userAgent.indexOf('compatible') != -1 || window.navigator.userAgent.indexOf('AppleWebKit') != -1){
    browser_name = '360'
  }

  • 獲取當前訪問的終端

    var ua = navigator.userAgent;
  var terminal_name = 'Failed to identify the terminal';
  if (ua.indexOf("Windows") !== -1){
    terminal_name = "Windows";
  }else if (ua.indexOf("Mac OS X ") !== -1){
    terminal_name = "OSX";
  }else if (ua.indexOf("Linux") !== -1){
    terminal_name = "Linux";
  }else if (ua.indexOf("Android") !== -1){
    terminal_name = "Android";
  }else if (ua.indexOf("Windows Phone") !== -1){
    terminal_name = "Windows Phone";
  }else if (ua.indexOf(/Mac OS X/i) !== -1){
    terminal_name = "iOS";
  }

  • 本地上傳圖片文件後，本地預覽圖片

    本地上傳圖片文件後，本地預覽圖片：https://www.jb51.net/article/118660.htm

    兩種方式：
    1. window.FileReader
    2. window.URL.createObjectURL

  • 上傳到服務器後，預覽圖片

    <div v-show="imgVisible" class="view-pic" @click="hideImg">
    <img :src="imgSrc" class="view-pic-img">
  </div>
    .view-pic {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
}

.view-pic-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

    顯示時：

    var that = this;
that.imgObj = new Image();
that.imgObj.src = that.imgSrc; // 服務器圖片地址
that.imgObj.onload = function () {
    var saveImgWrap = document.getElementsByClassName('view-pic-img')[0];
    var rate = document.body.clientWidth/document.body.clientHeight;
    var imgRate = that.imgObj.width/that.imgObj.height;
    // 根據比例100%展現圖片
    // 本身計算的，目前未出現問題
    if(that.imgObj.width >= document.body.clientWidth && that.imgObj.height <= document.body.clientHeight){
        saveImgWrap.style.width = '100%';
        saveImgWrap.style.marginTop = (document.body.clientHeight - 20 - that.imgObj.height) / 2 + 'px';
    }else if(that.imgObj.height >= document.body.clientHeight && that.imgObj.width <= document.body.clientWidth){
        saveImgWrap.style.height = '100%';
    }else if(that.imgObj.width >= document.body.clientWidth && that.imgObj.height >= document.body.clientHeight){
        if(imgRate >= rate){
            saveImgWrap.style.width = '100%';
        }else if(imgRate < rate){
          saveImgWrap.style.height = '100%';
        }
    }else if(that.imgObj.width < document.body.clientWidth && that.imgObj.height < document.body.clientHeight){
        saveImgWrap.style.marginTop = (document.body.clientHeight - 20 - that.imgObj.height) / 2 + 'px';
    }
    that.imgVisible = true;
}

    隱藏時：

    this.imgVisible = !this.imgVisible；
// 清空url地址
this.imgSrc = ''
// 清空樣式
var saveImgWrap = document.getElementsByClassName('view-pic-img')[0];
saveImgWrap.style.width = '';
saveImgWrap.style.height = '';
saveImgWrap.style.marginTop = '';

  • 表情

    可使用對象存儲，鍵爲表情的名稱等等，值爲表情（圖片）的url地址，
    存儲：點擊時獲取對應的值，而後拼接起來

  • 過濾emoji（數據庫可能不支持emoji的存儲）

    new RegExp(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig)

  • 頁面位置跳轉：

    可使用上面說的錨點的方法，
    也能夠修改scrollTop，如：

    document.getElementById(id).scrollTop = document.getElementById(id).scrollHeight;

  • 獲取瀏覽器系統語言

    var lang;
if (navigator.language){
　　lang = navigator.language.toLowerCase();
}else if(navigator.userLanguage){
　　lang = navigator.userLanguage.toLowerCase();
};

  • 事件監聽（兼容）

    function addEvent(el, type, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    el.attachEvent('on' + type, fn);
  } else {
    el['on' + type] = fn;
  }
}

  • 取消事件監聽

    function removeEvent(el, type, fn){
    if (window.removeEventListener) {
      el.removeEventListener(type, fn, false);
    } else if (window.detachEvent) {
      el.detachEvent('on' + type, fn);
    } else {
      el['on' + type] = function(){};
    }
}

  • 阻止冒泡 & 阻止默認行爲（兼容）

    補充：IE經過window.event獲取事件對象

    function stopPropagation(e){
    e = e || window.event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  }
function preventDefault(e){
    e = e || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue = false;
    }
}
function stopEvent(e){
    e = e || window.event;
    stopPropagation(e);
    preventDefault(e);
}

  • 獲取觸發事件的元素（兼容）

    var target = event.target || event.srcElement;
var from = e.relatedTarget || e.formElement;
var to = e.relatedTarget || e.toElement;

  • 獲取非行間樣式（兼容）

    function getStyle(el, name) {
   if (el.currentStyle) {
     return el.currentStyle[name];
   }else{
     return getComputedStyle(el, null)[name];
   }
}

    另：getClientRects 和 getBoundingClientRect

  • 鼠標滾動事件

    火狐：DOMMouseScroll
    其餘：onmousewheel

  • IE console的問題

    IE console的問題：https://blog.csdn.net/qq_32526373/article/details/79046536

  • Module build failed: Error: Cannot find module 'lodash.clonedeep'：
    另：sass安裝失敗的話，能夠試試刪了以後使用cnpm install安裝。
    sass安裝出錯

  • 本地訪問localhost成功，訪問IP失敗（提示拒絕訪問），Vue項目（其餘應該殊途同歸）

    • 將config/index.js裏面的dev的host改爲0.0.0.0便可
    • package.json的scripts的dev語句最後加上--host 0.0.0.0（就是啓動的語句後加；有的啓動的語句是dev，有的是start等等）

  • echarts圖表自適應，窗口變化時
    echarts的圖表自適應resize問題

    echart圖表自己是提供了一個resize的函數的。

    echart圖表的resize實際上是重繪canvas。

    window.onresize = myChart.resize;

myChart.setOption(option);

工具/資源等：

RGB顏色值與十六進制顏色碼轉換工具：http://www.sioe.cn/yingyong/yanse-rgb-16/

在線文本比較工具：http://www.jq22.com/textDifference

矢量圖標庫：www.iconfont.cn/

其餘：

更多兼容：https://www.cnblogs.com/qq313462961/p/6527184.html

更多兼容：https://www.cnblogs.com/wxydigua/p/3285466.html

更多兼容：http://www.iefans.net/ie-firefox-js-jianrong/
這個沒有換行...
幫ta換行後的內容效果以下：

  • document.form.item/document.ID

    IE中 document.formName.item(」itemName」)
    FF中 document.formName.elements["elementName"]

    建議使用document.getElementById(itemName)

  • 下標運算

    IE中 document.forms(」formName」)
    FF中 document.forms["formName"]
    IE中 document.getElementsByName(」inputName」)(1)
    FF中 document.getElementsByName(」inputName」)[1]

    建議使用[]做爲下標運算

  • window.event

    IE中 可使用window.event
    FF中 event 只能在事件發生的現場使用,能夠改寫成 事件=函數(event);

    function somemethod(evt) { 
  evt = evt ? evt : (window.event ? window.event : null); 
  alert(evt); 
}

  • event.x 與 event.y 問題

    IE中,event 對象有 x, y 屬性
    FF中,可用event.clientX ,event.clientY替代(IE也有該屬性)

    也可用: mX = event.x ? event.x : event.pageX;
    例如: <input onclick="somemethod(event)">

  • 操做frame

    IE中 能夠用window.FrameName取得該frame，
    FF中不行 FF中 能夠用window.top.document.getElementById(」frameId」)來訪問frame

    注:
    IE和FF均可以經過window.top.document.getElementById(」Frame」).src = ’somefile.htm’來切換frame的 內容,
    也均可以經過window.top.frameName.location = ’somefile.htm’來切換frame的內容

  • 調用showModalDialog

    IE中能夠用showModalDialog一個子窗口,並得到返回值.
    FF中沒有showModalDialog,但能夠用window.open來實現.

    例如: 在Main.cfm文件中有以下代碼:

    function ShowItemList(Obj){ 
  if (document.all){
    //IE var ReturnValue=window.showModalDialog(」ItemList.cfm?Id=341″,」self」,」dialogwidth:500px;status:false」); 
    if (typeOf(ReturnValue)!=’undefined’){ 
      Obj.value=ReturnValue; 
    } 
  } else{ 
    var subwin=window.open(Item.cfm?id=341,’newWin’,'modal=yes,width=500px’); 
  } 
} 
function ReturnValue(ReturnValue){ 
  Obj=document.getElementById(’elementname’); 
  Obj.value=ReturnValue; 
}

    若是須要獲得返回值.須要用到window.open的參數modal=yes,並且必須在子窗口中向母窗口傳值(window.opener).
    例如在subwin.cfm中加入如下代碼:

    function ReturnThisValue(){ 
  window.opener.ReturnValue(document.getElementById(’SelectedItem’).value); 
}

  • 其它

    • 在FF中，自定義的屬性必須使用getAttribute()

    • FF中沒有 parentElement parement.children 而用 parentNode parentNode.childNodes,
      可使用 node.getElementsByTagName()

    • FF不支持onpropertychange事件

    • FF中 createElement不支持HTML代碼,能夠考慮用:document.write(esHTML);

    • IE 中innerText,在FF中能夠用textContent

    • FF下用class代替IE下的className

    • 若是FF調用obj.focus(); 報錯,請嘗試改成:

      window.setTimeout(function(){ 
  obj.focus(); 
}, 0);

    • firefox不支持 FILTER

    • IE: blur發生在focus後, FF: blur發生在focus前調用

    • IE: event.keyCode, FF：event.which

      function catcathevent(evt) { 
  evt = evt ? evt : (window.event ? window.event : null); 
  if (document.all){ 
    var keyvalue=evt.keyCode; 
  } else { 
    var keyvalue=evt.which; 
  } 
}

    • 設置容器位置 left、top及長寬,必須加上’px’,如 $(’obj’).style.left = ‘50px’;

    • 在FF地址欄中輸入about:config，會出現火狐的參數配置設置

滾動條寬度：https://segmentfault.com/q/1010000004817695/a-1020000004965925

滾動條樣式：https://blog.csdn.net/qq316895454/article/details/50998110

生成 iconfont 圖標字體：阿里的iconfont生成便可。

DIV橫排/豎排滾動（white-space/::-webkit-scrollbar的使用技巧以及display: inline-block的選擇）支持手勢

本地圖片生成連接：window.URL.createObjectURL()

input file的accept類型

讀取input的file中的圖片文件

刪除本地Git保存的帳號密碼

npm install報錯：鏡像安裝cnpm

查看git登錄用戶名、郵箱

刪除git帳號密碼

給localStorage設置一個有效期

解決打包樣式問題

element-ui中validateField怎麼驗證部分表單字段的正確與否

electron安裝+運行+打包成桌面應用+打包成安裝文件+開機自啓動

React + Electron 搭建一個桌面應用
結合React建立一個簡單Electron桌面應用

Create-react-app與Electron中線程間的通訊

離開頁面的執行函數 onbeforeunload事件與onunload事件

IMG標籤的before,after僞類不生效

React 中 onKeyDown,onKeyUp,onKeyPress事件

transform下position:fixed失效

Vue 判斷slot是否有內容

部分摘自：

《JavaScript設計模式》
分享資料的各位
https://www.w3cplus.com/css3/css-secrets/vertical-centering.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程