w3resource

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:

javascript-dom-exercise-1

Flowchart:

Flowchart: JavaScript - Modify paragraph text style through javascript code using button.

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.



Follow us on Facebook and Twitter for latest update.