淺析被element.style所覆蓋的樣式

近日，我在用swiper插件寫一個手遊官網時，出現了一個很奇怪的問題。問題以下

 

 如上圖所示，這裏是一個能夠左右拖動的ul，每個英雄介紹都是一個li標籤，上圖這是正常的狀況。但是，它會隨機不按期不定時間不限次數的出現一種很奇怪的bug，好比

 

 上圖是pc端查看的時候，11個li標籤組成的英雄介紹所有擠成一團。

這張圖是移動端查看的時候，又會出現相距甚遠的狀況

並且，最主要的是，這種狀況並非一直都這樣子的，這個bug發做時間不規律，並且一刷新就行了，這也給我定位問題帶來了不小的難度

後來，我抓住一次bug重現的機會，仔細看了這一部分的代碼，我發現一個令我很在乎的地方

我這裏爲了移動端自適應（該網站主要是面向移動端的），採用的是rem做爲單位，而不是用px

可是，我在樣式裏面發現居然出現了px

 

帶着疑問與納悶，我再次檢查了個人代碼。

內聯樣式：沒有；

引入的swiper.css和我本身寫的樣式裏面都沒有出現與這個相匹配的內容，就連element.style都沒有

我試着把li這裏的屬性給勾選取消，結果網頁就恢復正常了，如今基本能夠肯定就是由於這個問題致使bug的出現

然而，這個element.style究竟是什麼？爲何由於這個東西會致使Bug?

我上網查了下，發現這個element.style是內聯樣式或者是js改寫代碼以後所留下的，剛纔說過，內聯樣式沒有這方面的東西

那麼，就只剩下js了，我先檢查了本身寫的js，沒問題，再一看swiper的js，懵逼了，由於，我用的是swiper.min.js

因而，我只能用最笨的辦法，修改下面的swiper的js代碼裏面的參數

我發現，根據這裏的修改，那個element.style裏面的值也不停在變，slidesPerView: 後面的參數原本是表明着這一排會出現幾個li，數字越大，element.style裏面的width越小，若是不寫，那麼就是100%父元素的寬

後面一個就更簡單了，就是margin-right,參數是多少，就是多少個px的margin-righ;

原來，該問題的原由是由於swiper插件，會根據最外層的.swiper-container的寬度和slidesPerView: 後面的參數給li設置寬度，當我處在PC端時，屏幕寬度大概是1900+px，.swiper-container的寬度大概是1700+px，並且我這裏的slidesPerView: 後面的參數是6，也就是說，一個li差很少是280+px左右，當我用谷歌瀏覽器裏面的手機模擬器來看的時候，這幾個li標籤的寬度仍是280+px，可是，我其餘的使用的是rem，個人rem是隨着屏幕寬度的變化而變化，這樣問題就來了，li標籤的寬度是不會變的，刷新了頁面第一次生成多少就是多少（除非再次刷新頁面），可是個人其餘dom的尺寸，卻隨着屏幕寬度大小在改變。因此纔會出現咱們看到的，超寬或者擠成一團的問題。

 

如今問題緣由弄明白了，那麼怎麼解決呢？element.style根本就不存在啊，並且，引用swiper插件的那段代碼不能改，最主要的是，個人swiper插件用的是swiper.min.js，想改都沒辦法改啊？

其實解決的辦法很簡單，大家是否還記得同樣東西：     ！important

沒錯，這個東西的做用就是提升指定CSS樣式規則的應用優先權。

也就是說：這個東西能夠覆蓋掉element.style裏面的屬性

直接在要覆蓋的樣式後面加上！important

 

 最後：我不知道這個問題該分類到swiper插件上呢，仍是該分類到其餘地方，可是我以爲吧，之後在開發過程當中，必定不要用xxxx.min.js   千萬不要在開發過程當中用壓縮過的插件，否則出了問題，到時候真的很麻煩