使用Javascript取消粗體文本不起作用

-1

我正在嘗試創建一個運行計時器的頁面，根據該計時器，文本項目變爲活動（粗體），稍後它會獲得穿透性，而我我也試圖讓它恢復正常（不是粗體），在這裏我堅持下去。使用Javascript取消粗體文本不起作用

Text項（每一個都有自己的ID）：

<div id="itm1"> Item 1 text</div>

當一個項目被激活：

oldHTML = document.getElementById("itm1").innerHTML; 
newHTML = "<span style='font-weight:bold;'>" + oldHTML + "</span>"; 
document.getElementById("itm1").innerHTML = newHTML;

上述作品和文字變得大膽。

後來，我努力在全面和取消粗體

oldHTML = document.getElementById("itm1").innerHTML; 
    newHTML = '<span style="text-decoration:line-through; font-weight:normal;">' + oldHTML + "</span>"; 
    document.getElementById("itm1").innerHTML = newHTML;

在此之後，我得到透，但大膽的影響依然存在。

我在做什麼錯？如何刪除粗體效果？

來源

2016-03-15 AlexB

_strike徹底和unbold_較早添加的HTML？ – Rayon

使用jQuery和.toggleClass（），使用粗體/非粗體風格的兩個不同類 – gavgrif

您正在將越來越多的「span」包裹在文本週圍，而不是*替換* span。你根本不應該這樣做;你應該直接在'itm1'元素上設置樣式或類，而不是引入新的元素。 – deceze

這裏的合適的解決方案將是使用CSS類的風格元素

function makebold() { 
 
    document.getElementById("itm1").classList.add('bold'); 
 
} 
 

 
function linethrough() { 
 
    document.getElementById("itm1").classList.add('linethrough'); 
 
    document.getElementById("itm1").classList.remove('bold'); 
 
}

.bold { 
 
    font-weight: bold; 
 
} 
 
.linethrough { 
 
    text-decoration: line-through; 
 
}

<div id="itm1">Item 1 text</div> 
 
<button onclick="makebold()">Bold</button> 
 
<button onclick="linethrough()">Line Through</button>

你的腳本創建下面的HTML，如果你看到內寬度有大膽的屬性，該屬性覆蓋外部風格

<div id="itm1"> 
    <span style="text-decoration:line-through; font-weight:normal;"> 
    <span style="font-weight:bold;"> Item 1 text</span> 
    </span> 
</div>

來源

2016-03-15 08:08:52

感謝您解釋我的錯誤和答案！有用。 – AlexB

正如在deceze的評論中提到的，您不會更換span，而是將其包裹在新的跨度。所以，你的HTML將看起來像這樣：

<div id="itm1"><span style="text-decoration:line-through; font-weight:normal;"><span style='font-weight:bold;'> Item 1 text</span></span></div>

所以，我認爲你可以從增加的Old div的內容類似的新跨越更換您到

var span=document.getElementById("itm1").querySelectorAll("span")[0]; 
span.style.fontWeight="normal"; 
span.style.textDecoration="line-through";

來源

2016-03-15 08:14:25

非常感謝！ – AlexB

這是發生在你的HTML時你的JavaScript運行 -

初始代碼 -

<div id="itm1"> Item 1 text</div>

之後的第一時間你的代碼運行 -

<div id="itm1"><span style='font-weight:bold;'> Item 1 text</span></div>

這使你的第1項文本大膽。

現在，當你的代碼再次運行，它改變了HTML到這一點 -

<div id="itm1"> 
    <span style="text-decoration:line-through; font-weight:normal;"> 
     <span style='font-weight:bold;'> 
      Item 1 text 
     </span> 
    </span> 
</div>

現在，在這一部分，字體重量：正常由字體重覆蓋：大膽因爲的內部跨度。這就是爲什麼你會用粗體字重量來剔除文字。

此外，這是不正確的做法。您應該在另一個答案中使用Arun建議的方法，或者如果您已在代碼中使用jQuery，請使用jQuery .toggleClass。

來源

2016-03-15 08:16:44 PRYM

使用Javascript取消粗體文本不起作用

回答

相關問題