2017-02-18 49 views
4

我正在尝试使用相同的JavaScript函数更改fontSizeinnerText。我已经更改了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> 
+0

是的,这是可能的。您可以在'javascript'处使用'.onclick'或'.addEventListener()'。是否需要使用事件属性'onclick'? – guest271314

+0

非常感谢您对我的问题感兴趣! @ guest271314是的我只想使用onclick函数。 –

回答

4

当然是,你需要改变你的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')"

+0

非常感谢你我的朋友! –

+0

没问题!祝你在网页开发的旅程中好运。 – BShaps

1

我刚才删除了第二“在你的活动结束时,它的工作原理。另外看看改写后的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>

+0

非常感谢你! –

+0

尽管如此,你可能要注意,使用内联JS是一种不好的做法。它使代码难以阅读,它将功能性问题与结构融合在一起,并且不可重用。 – 4castle

+0

基本上你是对的。但是今天有些技术违反了这些规则。在React JS中,你经常看到内联JS和CSS。 – StefanSL