なぜJavascriptはexユニットで高さを追加しませんか？

Question

JavaScriptがCSSの現在の高さに高さを追加したいのですが、それはpxユニットでは動作しますが、exユニットでは機能しません。これに対する解決策を知っている人は誰ですか？

HTML：

<div class="parent"> 
    <div class="child"> 
     Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div> 
</div> 

CSS：

.parent { 
    width:150px; 
    height:100px; 
    float:left; 
    background:red; 
} 

.child { 
    line-height:2.5ex; 
    max-height:5ex; 
    margin:2.5ex; 
    background: green; 
    overflow: hidden; 
} 

はJavaScript：

$(document).ready(function(){ 
    var child = $(".child"); 

    var height = parseInt(child.css("max-height").split("ex")[0]); 

    height = height + 10 ; 

    child.css({"max-height": height}); 

}); 

Answer 1

あなたはCSSプロパティを設定するときexを追加する必要があります。 jQuery docsから：明示的なユニットが指定されていない場合は

（「日」または「％」のような）、その後「PXは」値に連結されます。

$(document).ready(function(){ 
 
    var child = $(".child"); 
 

 
    var height = parseInt(child.css("max-height").split("ex")[0]); 
 

 
    height = height + 10 ; 
 

 
    child.css({"max-height": height + "ex"}); 
 

 
});

.parent { 
 
    width:150px; 
 
    height:100px; 
 
    float:left; 
 
    background:red; 
 
} 
 

 
.child { 
 
    line-height:2.5ex; 
 
    max-height:5ex; 
 
    margin:2.5ex; 
 
    background: green; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
     Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
 
    </div> 
 
</div>

Answer 2

あなたはこのようにそれを行う必要があります：child.css({"max-height": height + 'ex'});