JavaScript: Modify paragraph text style through javascript code using button
JavaScript DOM: Exercise-1 with Solution
Here is a sample html file with a submit button. Now modify the style of the paragraph text through javascript code.
Sample HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head>
<body>
<p id ='text'>JavaScript Exercises - w3resource</p>
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>
Tips: Clicking on the button the font, font size, and color of the paragraph text will be changed.
Sample Solution: -
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head>
<body>
<p id ='text'>JavaScript Exercises - w3resource</p>
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>
JavaScript Code:
function js_style()
{
//font styles added by JS:
text.style.fontSize = "14pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "green";
}
Sample Output:
Flowchart:
Live Demo:
See the Pen javascript-dom-exercise-1 by w3resource (@w3resource) on CodePen.
Improve this sample solution and post your code through Disqus
Previous: JavaScript DOM Exercises
Next: Write a JavaScript function to get the values of First and Last name of the following form.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics