Hello friends, In this tutorial I will explain how to make a text bold in JavaScript by using six methods that I applied to my dynamic web application.
Sometimes we need to bold text on our dynamic web application when we work with dynamic stuff and friends we know that JavaScript is a broad programming language that provides multiple ways to accomplish this and I will show those ways in this tutorial.
So, let's friends dive into the tutorial and see those techniques.Â
Method 1: Using HTML tags
In the first method, I will show you how to implement HTML tags <b> and <strong> to the Document Object Model (DOM) with Javascript to bold our specific content.
In this example, I used the document.getElementById to fetch the <p> tag with the id "myText".
Next, I implemented <strong> tags into the "innerHTML" attribute and bold words of the <p> tag.
Here, I used <strong> tag to bold <p> tag string but you can also use <b> tag.
<html>
<head>
<title>Make Text Bold in JavaScript</title>
</head>
<body>
<p id="myText">This is a sample text.</p>
<script>
// Get the element by its id
var myTextElement = document.getElementById("myText");
// Make the text bold by manipulating the HTML
myTextElement.innerHTML = "<strong>" + myTextElement.innerHTML + "</strong>";
</script>
</body>
</html>
Method 2: Using CSS Properties
In the second method, I defined a CSS class named "bold-text" within the <style> tag in this example, which sets the "font-weight" property to a bold string.
Next, I used the "classList.add" property which returns the <p> tag class name and the JavaScript code adds this class name to the <p> tag.
<html>
<head>
<title>Make Text Bold using Style Property of font-weight in JavaScript</title>
<style>
.bold-text
{
font-weight: bold;
}
</style>
</head>
<body>
<p id="myText">This is a sample text.</p>
<script>
// Get the element by its id
var myTextElement = document.getElementById("myText");
// Add the CSS class to make the text bold
myTextElement.classList.add("bold-text");
</script>
</body>
</html>
Method 3: Applying Conditions for Conditional Bold Text
In this example, I used "document.getElementById" to obtain the <p>; tag with the id "txt" and store it in the "element" variable.
Next, I created a new variable with the name "check" and assigned its value to "true" because using this variable determines we want to bold string.
Here I used the if condition and wrapped the "element" variable in the "style.fontWeight" property tag and verified that the value of the "check" variable is true.
<html>
<head>
<title>Make Text Bold using Conditional Statements in JavaScript</title>
</head>
<body>
<p id="txt">This is a sample text.</p>
<script>
// JavaScript code
let element = document.getElementById("txt");
//set condition variable
let check = true;
if (check)
{
element.style.fontWeight = "bold";
}
else
{
element.style.fontWeight = "normal";
}
</script>
</body>
</html>
Method 4: Implement by Button Click Events
In this example, I used a button-click event to dynamically bold string into the HTML element.
Here, I used the ID "boldButton" to identify the button element and I added an event listener to the click event.
Upon clicking the button, this code will bolden the string by selecting the text element with the ID "txt" and setting its "font-weight" value to "bold".
<html>
<head>
<title>Build Stuff Bold using Click Events in JavaScript</title>
</head>
<body>
<p id="txt">This is some text.</p>
<button id="boldButton">Make Bold</button>
<script>
const button = document.getElementById('boldButton');
const textElement = document.getElementById('txt');
button.addEventListener('click', () => {
textElement.style.fontWeight = 'bold';
});
</script>
</body>
</html>
Method 5: Incorporating Variables for Dynamic Bold Text
In this example, I set "userPreference" variable as a bold. Next, I bolded the text dynamically using the variable "userPreference" which I changed in response.
<html>
<head>
<title>Example of Incorporating Variables for Dynamic Bold Content in JavaScript</title>
</head>
<body>
<p id="text">This is some text.</p>
<script>
let userPreference = "bold";
let element = document.getElementById("text");
element.style.fontWeight = userPreference;
</script>
</body>
</html>
Method 6: String.bold()
In this last method, I used the "String.bold()" method to bold content.Â
In this example, I defined a variable named "txt" with the string value "Hello World" set to it and used the bold() method to the "txt" variable because in this method the HTML <b> already has.
<html>
<head>
<title>Bold Text using String.Bold() method in JavaScript</title>
</head>
<body>
<script>
let txt = 'Hello World';
document.write(txt.bold());
</script>
</body>
</html>
No comments:
Post a Comment