CSS是jQuery中

Question

設置，我有以下代碼：

function MyFitText2(width, height, span) { 
    var fontSize = 20; 
    $(span).css('font-size', fontSize); 
    do { 
     fontSize = fontSize - 1; 
     textHeight = $(span).height(); 
     textWidth = $(span).width(); 
     $(span).css('font-size', fontSize); 
    } while ((textHeight > height || textWidth > width) && fontSize > 1); 
} 

及用途：

var pinkboxspan = "<span style=\"position:absolute; left:" + $thisPinkBox["PinkBoxLeft"] + "px; top:" + $thisPinkBox["PinkBoxBoxTop"] + "px; " + 
         "text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));" + 
         "line-height:1.1; " + 
         "\">" + text + "</span>&nbsp;"; 

MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], pinkboxspan); 
$(pinkboxspan).css('width', $thisPinkBox["PinkBoxWidth"] + 'px'); 
$(pinkboxspan).css('height', $thisPinkBox["PinkBoxHeight"] + 'px'); 

但結果：

<span style="position:absolute; left:870px; top:413px; text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));line-height:1.1; ">Sergey's Office 
<br>Y Amphitheatre Parkway 
<br>Mountain View, CA XXXXX 
<br>United States 
<br></span> 

然後由我把它添加到DOM以下方式：

var imageElement = $("<div style='text-align:left;'><div style='position: relative; display: inline-block;'><img style='position: relative; vertical-align: central;' src='" + $('#previewImage').attr('src') + "' /></div></div>"); 

var divElement = imageElement.find('div'); 

var divContent = ''; 
    // code above in $.each 
    divContent = divContent + pinkboxspan; 

divElement.append(divContent); 

$('#divOverlay').html(divElement); 

所以，參數寬度/高度沒有設置。爲什麼以及如何解決它？

Answer 1

您正在創建未保持的jQuery對象並處理其CSS規則，因此未反映已修改的CSS屬性。

創建一個jQuery對象，並通過代碼使用它。

var span = $(pinkboxspan); 
span = MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], span); 
span.css('width', $thisPinkBox["PinkBoxWidth"] + 'px'); 

//if you need string 
pinkboxspan = span.prop('outerHTML'); 

function MyFitText2(width, height, span) { 
    span.css('font-size', 20); 
    //Manipulate Span properties 
    return span; 
} 

Answer 2

在開始時創建的jQuery對象，以便改變你pinkboxspan分配...

var pinkboxspan = $("<span style=\"position:absolute; left:" + $thisPinkBox["PinkBoxLeft"] + "px; top:" + $thisPinkBox["PinkBoxBoxTop"] + "px; " + 
        "text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));" + 
        "line-height:1.1; " + 
        "\">" + text + "</span>&nbsp;"); 

然後更改其他代碼使用pinkboxspan作爲一個jQuery對象，而不是純文本.. 。

MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], pinkboxspan); 
pinkboxspan.css('width', $thisPinkBox["PinkBoxWidth"] + 'px'); 
pinkboxspan.css('height', $thisPinkBox["PinkBoxHeight"] + 'px'); 

更改您的功能，以及...

function MyFitText2(width, height, span) { 
    var fontSize = 20; 
    span.css('font-size', fontSize); 
    do { 
     fontSize = fontSize - 1; 
     textHeight = span.height(); 
     textWidth = span.width(); 
     span.css('font-size', fontSize); 
    } while ((textHeight > height || textWidth > width) && fontSize > 1); 
} 

你完成了:)