我正在嘗試將 div html 內容作為文本復制到另一個元素，但是當我嘗試忽略空格時，知道如何做到這一點嗎？
這是我的代碼：
HTML
<div id="parent">
<!-- Component: -->
<div id="component" class="">
<p class="px-8 text-center py-2 bg-green-500 text-white
dark:bg-green-50 dark:text-green-900
font-medium text-lg rounded-md
hover:scale-105 hover:bg-green-100
">
Start Now
</p>
</div>
<!-- Code: -->
<div class="px-8 my-8">
<h1 class="text-white ">Code:</h1>
<p class="text-white" id="code"></p>
</div>
</div>
JS
const component = document.getElementById("component")
const code = document.querySelector("#code")
code.innerText=component.innerHTML
我得到 什么：我得到什么
我想要 什么：我想要什么
uj5u.com熱心網友回復：
不是空白被忽略，而是瀏覽器如何顯示特定元素。每個 HTML 元素都有自己預定義的樣式和特征，通常通過用戶代理樣式表定義。
鑒于您想要尊重空格，您可以使用 css 屬性white-space或更改#code為<pre>標簽而不是 a <p>（缺點是您仍然需要覆寫默認瀏覽器樣式）。
const comp = document.getElementById('component');
const original = document.getElementById('codeoriginal');
const code = document.getElementById('code');
const code2 = document.getElementById('code2');
original.innerText = comp.innerHTML;
code.innerText = comp.innerHTML;
code2.innerText = comp.innerHTML;#code {
white-space: pre;
}<div id="parent">
<!-- Component: -->
<div id="component" class="">
<p class="px-8 text-center py-2 bg-green-500 text-white
dark:bg-green-50 dark:text-green-900
font-medium text-lg rounded-md
hover:scale-105 hover:bg-green-100
">
Start Now
</p>
</div>
<!-- Code: -->
<div class="px-8 my-8">
<h1 class="text-white ">Code: (Original)</h1>
<p class="text-white" id="codeoriginal"></p>
</div>
<div class="px-8 my-8">
<h1 class="text-white ">Code: (CSS change)</h1>
<p class="text-white" id="code"></p>
</div>
<div class="px-8 my-8">
<h1 class="text-white ">Code: (Using pre)</h1>
<pre class="text-white" id="code2"></p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441720.html
標籤：javascript html dom
下一篇：查看專案而不將滑鼠懸停在其上