You might frequently need to modify the way text looks on the web when working with dynamic stuff, such as bolding it. JavaScript is a broad programming language that provides multiple ways to accomplish this.
This article will explain several JavaScript techniques for bolding text.
Method 1: Using HTML tags
Adding HTML tags straight into the Document Object Model (DOM) is the easiest way to make text bold with JavaScript. Text can be rendered in bold type by using the <b> and <strong> tags.Â
Use these steps to apply this method:
1. Decide which element will receive bold formatting.
2. To make content bold, create a string with the desired text in it.
3. The text string should be enclosed in <strong> or <b> tags.
4. JavaScript's DOM manipulation tools can be used to inject the generated HTML string into the designated element.
In this example, document.getElementById is used to fetch the element with the id "myText".Â
Next, we encapsulate the current content with <strong> tags to set its innerHTML attribute. An HTML tag for significant importance, the <strong> tag is usually displayed as bold words.
<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
Changing the target element's CSS settings dynamically is another way to make content bold. This method makes use of JavaScript's access to and modification of CSS styles.Â
To put this technique into execution, do the following:
1. Decide which element's text you want to be bold.
2. JavaScript's style property can be used to access the element's CSS style object.
3. Adjust the style object's font-weight attribute to 'bold'.
We define a CSS class named "bold-text" in this example, which sets the font-weight property to "bold". Next, using classList.add, the JavaScript code adds this class to the element.
<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
Text manipulation becomes even more complicated when using JavaScript because of its ability to interact with conditional statements. For example, we can only render something bold when the following criteria are satisfied:
This script sets the font weight to normal ordinarily but only bolds the text when the condition variable is true.
This code uses "document.getElementById" to obtain the element with the id "myText" and stores it in the "element" variable.Â
A flag that determines whether or not the text should be bolded is the "check" variable.Â
The text will become bold when the if statement wraps the "element" variable in the "style.fontWeight" property tag after verifying 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="myText">This is a sample text.</p>
<script>
// JavaScript code
let element = document.getElementById("myText");
//set condition variable
let check = true;
if (check)
{
element.style.fontWeight = "bold";
}
else
{
element.style.fontWeight = "normal";
}
</script>
</body>
</html>
Second Example,
Here's another instance of using a conditional statement to generate stuff in bold in JavaScript:
The "prompt()" method is used in this code to obtain the user's text input. The function "confirm()" is used to inquire from the user whether or not the content should be bolded. If the user wants to make the content bold, the code then applies the same logic as in the previous example.
<html>
<head>
<title>Create Words Bold using Conditional Statements in JavaScript</title>
</head>
<body>
<script>
let text = prompt("Enter some text:");
let shouldMakeBold = confirm("Should this text be bold?");
if (shouldMakeBold)
{
text = "<b>" + text + "</b>";
}
document.write(text)
</script>
</body>
</html>
Method 4: Implement by Button Click Events
We could use buttons. Input fields can have their text style dynamically customized by clicking events.
By using the ID "boldButton" to identify the button element, this code will add an event listener to the click event.Â
Upon clicking the button, the code will bolden the material by selecting the text element with the ID "myText" and setting its "font-weight" value to bold.
<html>
<head>
<title>Build Stuff Bold using Click Events in JavaScript</title>
</head>
<body>
<p id="myText">This is some text.</p>
<button id="boldButton">Make Bold</button>
<script>
const button = document.getElementById('boldButton');
const textElement = document.getElementById('myText');
button.addEventListener('click', () => {
textElement.style.fontWeight = 'bold';
});
</script>
</body>
</html>
Method 5: Incorporating Variables for Dynamic Bold Text
We can employ variables to dynamically decide the boldness of words to increase flexibility.Â
Take a look at this instance:
In this example, the boldness of the text can be dynamically changed since the variable "userPreference" may be altered in response to user input or different situations.
<html>
<head>
<title>Example of Incorporating Variables for Dynamic Bold Content in JavaScript</title>
</head>
<body>
<p id="myText">This is some text.</p>
<script>
let userPreference = "bold";
let element = document.getElementById("myText");
element.style.fontWeight = userPreference;
</script>
</body>
</html>
Method 6: String.bold()
The String.bold() is the deprecated method.
While the String.bold() method is still supported by some browsers, it is deprecated and should not be used in modern JavaScript development. Although the text is directly embedded within <b> tags with this method, but it's not as flexible or maintainable as the methods described above.
This example uses a defined variable named "txt" with the string value "Hello World" set to it. The HTML <b> element is now present in the string that we have returned by using the bold() method of the "txt" variable.
<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>
Always keep in mind that your programming preferences and the particular environment of your application will determine whether you choose to manipulate CSS or use HTML tags. These approaches work well for bolding text in JavaScript.
No comments:
Post a Comment