CSSは、jqueryの

Question

に設定されているI次のコードを持っている：

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); 

したがって、width/heightパラメータは設定されません。なぜ、どのようにそれを解決するのですか？

Answer 1

永続化されずにCSSルールを操作するjQueryオブジェクトを作成しているため、変更されたCSSプロパティは反映されません。

jQueryオブジェクトを作成し、outコードで使用します。

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

ので、あなたのpinkboxspan割り当ては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;"); 

...に変更初めに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); 
} 

これで完了です:)