Skip to content

Instantly share code, notes, and snippets.

@Yousif-FJ
Created January 8, 2022 21:34
Show Gist options
  • Save Yousif-FJ/1cb330ab75d22301338c86152f2112df to your computer and use it in GitHub Desktop.
Save Yousif-FJ/1cb330ab75d22301338c86152f2112df to your computer and use it in GitHub Desktop.
Write a program using JavaScript to change the font to "Times New Roman" and the colour to "red" of the text inside <p> element when the user click on the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.new-style{
font-family: "Times New Roman";
color: red;
}
</style>
</head>
<body>
<p onclick="ChangeParagraphStyle();" id="my-paragrph">When you click this text it will change style</p>
<script>
function ChangeParagraphStyle(){
const paragraph = document.getElementById("my-paragrph");
paragraph.className = "new-style";
}
</script>
</body>
</html>
@Yousif-FJ
Copy link
Author

before click
image
After click
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment