**一些會用到的js方法

杜萍偉發表於2018-11-30
JS

原生js獲取樣式

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。
語法如下：
    window.getComputedStyle("元素", "偽類");
這個方法接受兩個引數：要取得計算樣式的元素和一個偽元素字串（例如“:before”）,如果不需要偽元素資訊，第二個引數可以是null。
也可以通過 document.defaultView.getComputedStyle("元素", "偽類") 來使用。
例子：
    var test = document.getElementById("test")
    注意：Firefox和Safari會將顏色轉換成rgb格式，如果test節點上沒有任何樣式，通過style.length來檢視瀏覽器預設樣式的個數。
    IE6-8不支援該方法，需要使用方法 ele.currentStyle

getPropertyValue() 獲取CSS樣式的直接屬性名稱
語法如下：
    window.getComputedStyle(element, null).getPropertyValue(屬性)
例子：
    var test = document.getElementById('test');
    window.getComputedStyle(test, null).getPropertyValue("background-color");
    注意：屬性名不支援駝峰格式，IE6-8不支援該方法，需要使用方法getAttribute

getBoundingClientRect() 獲取元素相對於瀏覽器的絕對座標，內容為：
    DOMRect = {
        bottom: 0,
        height: 0,
        left: 0,
        right: 0,
        top: 0,
        width: 0,
        x: 0,
        y: 0,
    }
複製程式碼

echarts問題解決辦法

首先初始化出來圖表容器的寬度，然後新增resize 的事件。
原因：echarts對於指定百分比寬度的容器，例如100%，因為初始時display:none，所以會把寬度預設為100px。

node使用mongoose連線問題

    mongoose連線表名會自動加s，解決辦法：
    1、表名都加s
    2、指定連線名稱mongoose.model('home', HomesSchema, 'home');
    collection名稱應該為第三個引數，若為預設，會自動根據引數name的值以複數形式生成collection,第三個引數才是資料庫的表名稱
複製程式碼

文字加點寬度

letter-spacing: 1px;
複製程式碼

圖片上傳回顯

  $(function(){  
       var fil=$("#fil");  
       $("<img>").insertAfter("input");  
       fil.bind('change',function(){  
           var fordate=new FormData();  //得到一個FormData物件：
           var fils=$("#fil").get(0).files[0];  //得到file物件
           console.log(fils);
           fordate.append('pic',fils);  //用append方法新增鍵值對
           var srcc=window.URL.createObjectURL(fils);     //傳入的引數建立一個指向該引數物件的URL
           console.log(srcc);   
           $("img").attr({'src':srcc,'width':500+'px','heigth':500+'px'});  
           $.ajax({  //傳送ajax請求
                url: "index4.php",  
                type: "post",  
                data: fordate,  
                processData : false,  
                contentType : false,   
                success: function(html){  
                  console.log(html);  
                }  
           });  
       });  
  });  
複製程式碼

bootstrap問題：

1、form表單中如果僅有一個input，回車會觸發表單提交方法，解決方法，再新增一個input，設定為hidden
參考：blog.csdn.net/kungfu_pand…

滾動條

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}
複製程式碼

webstorm 快捷設定

--style表示解析後的css是什麼格式，如：--style compressed.
有四種取值分別為：nested，expanded，compact，compressed.
--sourcemap表示開啟sourcemap除錯。
開啟sourcemap除錯後，會生成一個字尾名為.css.map檔案。
webstorm是預設開啟sourcemap的，所以可以不填寫

li動畫

<style>
    ul{display:flex;position:absolute;width:800px;top:50%;left:50%;transform:translate(-50%,-50%);}
    li{position:relative;padding:20px;font-size:24px;color:#000;line-height:1;transition:0.2s all linear;cursor:pointer;list-style:none;}
    li::before{content:"";position:absolute;top:0;left:100%;width:0;height:100%;border-bottom:2px solid #000;transition:0.2s all linear;}
    li:hover::before{width:100%;top:0;left:0;transition-delay:0.1s;border-bottom-color:#000;}
    li:hover ~ li::before{left:0;}
    li:active{background:#000;color:#fff;}
    li.active{background:#000;color:#fff;}
</style>
<ul>
	<li class="active">不可思議的CSS</li>
	<li>導航欄</li><li>游標下劃線跟隨</li>
	<li>PURE CSS</li><li>Coco</li>
</ul>
複製程式碼

相關文章