鍍金池/ 問答/HTML/ 用js設(shè)置元素樣式， 頁面加載過慢時，樣式不起作用

用js設(shè)置元素樣式， 頁面加載過慢時，樣式不起作用

圖片描述

用js設(shè)置來設(shè)置tab的寬度和定位

$(function(){

    var width = Math.round($('ul').width() / 5)
    var li = $('li')
    
    li.width(width)
    for(var i = 0; i < li.length; i++) {
        li.eq(i).css('left', i * width)
    }
    
})

但是在頁面加載的時候會出現(xiàn)這樣的問題。
圖片描述

這樣的情況要如何解決?

回答
編輯回答
眼雜

js執(zhí)行完畢再顯示頁面，之前隱藏掉

2018年8月18日 22:00
編輯回答
懷中人

window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個函數(shù)，ocument.addEventListener("DOMContentLoaded", init, false);頁面加載之前執(zhí)行js

2017年3月11日 00:12
編輯回答
空白格

一方面li是怎么定位的，還有最好把單位都加上，雖然默認(rèn)是px

2018年7月21日 17:36
編輯回答
愚念

你的js是寫在哪里？js先于頁面加載完成之前執(zhí)行
把js寫在window.onload里邊
或者寫在body結(jié)束標(biāo)簽之前

2017年2月8日 20:35
編輯回答
尕筱澄

先CSS給默認(rèn)的一個ul的寬度？

2017年10月21日 22:41
編輯回答
尛憇藌

其實(shí)可以直接用css做就不會有這個問題，如果非要用js 那可以先隱藏 執(zhí)行了你的js計算后在顯示即可

2018年3月25日 18:29
編輯回答
冷溫柔

寫在window.onload里面

2018年7月12日 14:48
編輯回答
下墜

我個人認(rèn)為能使用css實(shí)現(xiàn)的盡量別用JS，看你的結(jié)構(gòu)我猜測的解決方法有
1、使用flex布局，平分每一個li的寬度。使用css選擇第三個li，讓它內(nèi)部的字體變大，或者增加一個能讓字體變大的類，用js控制即可；
2、給li寫成百分比寬度，超出的li隱藏，左右滑動始終使當(dāng)前展示的第三個字體增大即可；

由于不知道你項目的具體需求，因此表述拙見，說的不對，多多包涵。

2017年11月17日 05:03
編輯回答
法克魷

改成如下即可

$(document).ready(function(e){

    var width = Math.round($('ul').width() / 5)
    var li = $('li')
    
    li.width(width)
    for(var i = 0; i < li.length; i++) {
        li.eq(i).css('left', i * width)
    }
    
})
2017年6月18日 05:56