動態改變引入的CSS檔案

來源:互聯網
上載者:User
        window.onload = function(){
            setLineTextFrontWidth();
        }
        function setLineTextFrontWidth(){
            var curTotalWidth = (document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
            if(curTotalWidth<=100){ return; }
            curTotalWidth = curTotalWidth - 100;
            var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
            var hasChangeL1 = false;
            var hasChangeL2 = false;
            for(var x=0;x<classes.length;x++) {
                if( classes[x].selectorText=='.LineText1Front' ) {
                    hasChangeL1 = true;
                       classes[x].style.width = '' + curTotalWidth + 'px';
                }else if(classes[x].selectorText=='.LineText2Front'){
                    hasChangeL2 = true;
                       classes[x].style.width = '' + curTotalWidth + 'px';
                }
                if( hasChangeL1 && hasChangeL2 ){
                    break;
                }
            }
        }

 

再最佳化一次多解析度CSS模式及視窗改變也進行處理 

    window.onload = function(){
            setLineTextFrontWidth();
        }
        window.onresize = function(){
            setLineTextFrontWidth();
        }
function setLineTextFrontWidth(){
    var curTotalWidth = (document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
    if(curTotalWidth<=100){ return; }
    var vFontWidth = curTotalWidth - 100;
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    if(curTotalWidth>=1024){
        setLineTextFrontWidthByMinWidth(classes,vFontWidth,1024);
    }else{
        setLineTextFrontWidthStyle(classes,vFontWidth);
    }
}
function setLineTextFrontWidthStyle(vClass,vWidthPx){
    for(var x=0;x<vClass.length;x++) {
        if( vClass[x].selectorText=='.LineText1Front' || vClass[x].selectorText=='.LineText2Front' ) {
                vClass[x].style.width = '' + vWidthPx + 'px';
        }
    }
}
function setLineTextFrontWidthByMinWidth(vClass,vWidthPx,vMinWidth){
    for(var x=0;x<vClass.length;x++) {
        if (vClass[x].type == '4' && vClass[x].media.mediaText == 'only screen and (min-width: '+vMinWidth+'px)') {
             var classes = vClass[x].rules || vClass[x].cssRules;
             setLineTextFrontWidthStyle(classes,vWidthPx);
             break;
         }
    }

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.