為什么用execCommand進行對齊無法正常工作？

Question

為什么用execCommand進行對齊無法正常工作？ 檢查以下代碼：

 $('#JustifyLeft').click(function(){ document.execCommand("JustifyLeft", false, ""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Select whole text and click the button</p> <div class="editable" contenteditable="TRUE" style="font-size: 27px; text-align: center;"> <span style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi<span style="font-size: 35px;">I</span>am<span style="font-size: 18px;">Blah Blah</span>Ok</span> </div> <input type="button" id="JustifyLeft" value="Align Left"> 

在選擇了整個文本並將其對齊后，您將看到下划線僅保留在<text>節點上，而<span>節點沒有文本修飾。

這是錯誤嗎？ 有沒有辦法糾正它？

Answer 1

如果您在開發人員工具中查看元素結構，您將看到execCommand在Hi，am和Ok之后添加了</span> ，並用<div>包裹起來，如下所示

    <div style="text-align: left;">
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Hi</span>
    <span style="font-style: italic; font-weight: bold; font-size: 35px;">I</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">am</span>
    <span style="font-style: italic; font-weight: bold; font-size: 18px;">Blah Blah</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Ok</span>
    </div>

您可以通過將第一個<span>更改為<div>來糾正它，如下所示

<div style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi
<span style="font-size: 35px;">I</span>am
<span style="font-size: 18px;">Blah Blah</span>Ok
</div>