僅使用一個JavaScript函數更改標籤中的fontSize和文本

我正在嘗試使用相同的JavaScript函數更改fontSize和innerText。我已經更改了fontSize，但我也希望使用相同的JavaScript函數更改<h3>標記中的文本。那可能嗎？僅使用一個JavaScript函數更改標籤中的fontSize和文本

<h3 id="h3_heading">This is H3 HEADING Click Below Button to Change Font Size</h3> 
<button type="button" onclick="document.getElementById('h3_heading').style.fontSize ='72px'""> 
    Click me to change font size and Written Text Inside H3 Tag 
</button>

來源

2017-02-18 Muhammad Osama

是的，這是可能的。您可以在'javascript'處使用'.onclick'或'.addEventListener（）'。是否需要使用事件屬性'onclick'？ – guest271314

非常感謝您對我的問題感興趣！ @ guest271314是的我只想使用onclick函數。 –

當然是，你需要改變你的onclick指向一個功能，在你的JavaScript代碼，即

<script> 
function changeFontSize(elementId) { 
    var element = document.getElementById(elementId); 
    element.style.fontSize = '72px'; 
    element.innerText = 'Text you want here'; 
} 
</script>

你的onclick將變爲onclick="changeFontSize('h3_heading')"

來源

2017-02-18 00:58:43 BShaps

非常感謝你我的朋友！ –

沒問題！祝你在網頁開發的旅程中好運。 – BShaps

我剛纔刪除了第二「在你的活動結束時，它的工作原理。另外看看改寫後的HTML onclick事件。

<h3 id="h3_heading">This is H3 HEADING Click Below Button to Change Font Size</h3> 
 

 
<button type="button" onclick="el = document.getElementById('h3_heading'); el.style.fontSize ='72px'; el.innerHTML = 'H3 changed!'">Click me to change font size and Written Text Inside H3 Tag</button>

來源

2017-02-18 01:00:25 StefanSL

非常感謝你！ –

儘管如此，你可能要注意，使用內聯JS是一種不好的做法。它使代碼難以閱讀，它將功能性問題與結構融合在一起，並且不可重用。 – 4castle

基本上你是對的。但是今天有些技術違反了這些規則。在React JS中，你經常看到內聯JS和CSS。 – StefanSL

僅使用一個JavaScript函數更改標籤中的fontSize和文本

回答

相關問題