jquery - 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 属性不会反射(reflect)出来。

创建一个 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;
}