js字符串添加css变量

1. js字符串添加css变量

          var per = parseFloat(msgArr[i].count)/parseFloat(msgArr[0].count)*80+'%';

         str += '<span class="progress progress-bar barbar" style="width:'+per+'">'+'</span>'; 

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

• // 执行代码
• // way 2 外部赋值宽度, Dom加载后获取width,改变宽度!!!!!!!
• var widthbar = $(".barbar");
• for (let i = 0; i < msgArr.length; i++) {
• widthbar[i].style.width = parseFloat(msgArr[i].count)/parseFloat(msgArr[0].count)*80+'%';
• // console.log(msgArr);
• }
• });

3. 获取遍历Dom,防止溢出

$(".progressbar-title").each(function(i,val){

//ii 指第几个元素的序列号。

//vv 指遍历得到的元素。

// console.log(i,val);

var list = $(this);//n.fn.init [span.progressbar-title, context: span.progressbar-title]

dataUpload.method("http://10.237.22.177:8080/hotLine","","GET",0,120000,function (data) {
    console.log(data,"top10");   
    // {startStations: "靖西站", endStations: "百色", count: "52"}
    var msgArr = data;
    var str = "";
    var ww = "";
    // console.log(msgArr[0].count);
    // var per = msgArr[0].count;
    $.each(msgArr,function(i,obj){    
        var per =  parseFloat(msgArr[i].count)/parseFloat(msgArr[0].count)*80+'%';    
       
        str += '<div class="line-part">';
            str += '<div class="line-progress">';
                str += '<span class="order-num">' + (i+1) + '</span>';
                str += '<span class="progressbar-title">'+ obj.startStations +'-'+ obj.endStations+'('+obj.count+'张'+')'+'</span>';
            str += '</div>';
            // way 1 变量加在css    !!!!!!!
            str += '<span class="progress progress-bar barbar" style="width:'+per+'">'+'</span>';
        str += '</div>';
    })
    
    // $(".range-part").append(str);//重复
    $(".range-part").html(str);  
    
    $(document).ready(function(){
        // 执行代码   
        // way 2 外部赋值宽度, Dom加载后获取width,改变宽度!!!!!!!
        var widthbar = $(".barbar");
        for (let i = 0; i < msgArr.length; i++) {
            // widthbar[i].style.width = parseFloat(msgArr[i].count)/parseFloat(msgArr[0].count)*80+'%';
            // console.log(msgArr); 
        }
            
    });
    
    $(document).ready(function(){
        var widthRange = $('.line-part').width();  //获取width值。
        var widthTitle = $('.range-title').width();  //获取width值。

        // var widthRange = $('.progressbar-title').html();  。
        // for (let i = 0; i < msgArr.length; i++) {           
        console.log(widthRange);//
        // console.log(widthTitle,"widthTitle");
        if (widthTitle>(widthRange-10)) {
            // $(this).context
            // $('.range-title').css("font-size",'15px' );
        }        
        // 遍历控制字体显示 防止溢出
        $(".progressbar-title").each(function(i,val){
            //ii 指第几个元素的序列号。
            //vv 指遍历得到的元素。
            // console.log(i,val);  
            var list = $(this);//n.fn.init [span.progressbar-title, context: span.progressbar-title]
            console.log(list);
            var widthbar = $(this).context.offsetWidth;
            console.log(widthbar);
            if (widthbar>widthRange*0.9) {
                // $(this).context
                $(this).css("font-size",'0.56vw' );
            }
        })
    })
    
});