Utilize JavaScript to substitute font family with a designated class name

After discovering a code snippet that can change font family based on ID, I am interested in implementing it on my website but with a twist - using classes instead of IDs.

<!DOCTYPE html>
<html>
<body>
<div class="myP">This is a paragraph.</div>
<script>
    document.getElementsByClassName("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
</script>
</body>
</html>

Answer №1

The

document.getElementsByClassName()
method will retrieve an HTMLCollection object when called.
If you have multiple paragraphs, you can loop through the object or directly access a specific element using its index:

...
document.getElementsByClassName("myP")[0].style.fontSize = "18px";

https://jsfiddle.net/k9j4rp7u/

Answer №2

You have the option to utilize the className attribute and specify your font styles in CSS

var items = document.getElementsByClassName("myP");
for (var x = 0; x < items.length; x++) {

items[x].className += " myNewFont";
}
.myNewFont{
  font-family:Arial, Helvetica, sans-serif;
}
<div>This is a paragraph.</div>
<div class="myP">This is a paragraph.</div>
<div class="myP">This is a paragraph.</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restrict the character count in Vue Material chips

Currently, I am utilizing the Vue Material Chips component to gather string arrays. My goal is to limit the character length of each string within the array to 30 characters. The component offers a md-limit prop which restricts the number of strings in th ...

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

My current task involves sending the same query to multiple identical endpoints (about five) across various Kubernetes clusters. The goal is to aggregate the results without any delays and report failures to the user while continuing with the process seaml ...

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

The code snippet below seems to be causing some trouble. It's supposed to filter HTML content that includes a div with the class "filtered_entries_box", but it's not working as expected. $.ajax({ "url" : "start.php", "type" : "POST", ...

Output object data to table by clicking on it - requires two clicks for the data to be

I have a situation where I want the user to click a button in order to print an object obtained from a web service into a table. The issue is that currently, I have to click the button twice for it to work properly. Here's some more detail: The button ...

Troubleshooting: Issue with passing parameters in Wordpress ajax function

In my Wordpress Ajax implementation, I am facing an issue where the parameter value metakey: id is not being passed to $_POST["metakey"]. As a result, when I do a var_dump($_POST), it shows array(0) { }. If I manually set a static value for the variable i ...

The intricacies of JavaScript recursion explained thoroughly

I'm struggling to grasp how this recursion will function. Specifically, I can't seem to comprehend how the final console ('end'--) is being executed. Any guidance on the execution aspect would be greatly appreciated as I am having troub ...

Why isn't httpUploadProgress functioning correctly with Buffer data?

Recently, I have ventured into the world of node.js/express as I am attempting to create a multiple image uploading application utilizing cloudfront and an s3 bucket. My goal is to display a progress bar for the user by integrating socket.io for real-time ...

javascriptEmbed youtube video thumbnail dynamically as users input a URL

I am currently working on a React frontend for my web app. One of the features I want to implement is a URL input box, with an image display panel below it. The goal is that when a user enters a YouTube URL into the input box, the thumbnail of the correspo ...

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

Selected value is not displayed in the textbox when using autocomplete feature

---Ajax---- An issue has arisen with the autocomplete feature. While typing "wi" (for example, wipro), the drop-down list appears as expected. However, if only "wi" is selected in the text box, $(document).ready(function () { $("#company_name").key ...

Achieving synchronous function execution with a single click in React

In my current project, I am utilizing ReactJs and Redux. I have encountered a scenario where I need to trigger two functions sequentially with just one click on the mainfunc(). The second function should only execute after the first function has complete ...

Guide on adding an additional key:value pair to a sub document in a MongoDB collection

I'm facing difficulties trying to add a new key:value pair to an existing object in a MongoDB document. I've experimented with $each, $push, and $addToSet, but it seems like those are intended for arrays. I then attempted $set, but that only upd ...

Exploring the JSON data in Javascript using Ajax

Completely new to Javascript, I am just trying to grasp the basics of the language. Currently, I have a JSON request set up with the following code: function request(){ $.ajax({ dataType: "jsonp", type: 'GET', url: "getWebsite", ...

Apps created with PhoneGap will maintain the original sizing of web pages and not automatically resize for display on Android devices

After successfully porting my web-based tool to Android using PhoneGap from my Github repository, I encountered an issue with the display on Android devices. The app loads up too big for the screen, forcing me to constantly scroll around to see and access ...

Highcharts introduces shared tooltips for specific data series

I am seeking to implement specific behavior in highcharts regarding tooltips. The desired setup includes having two types of tooltips: the default shared tooltip a custom tooltip For the custom tooltip, a simple formatter can be utilized. However, the c ...

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

Email replay feature

Having an issue with my email validation function. I found the code I'm using here: Repeat email in HTML Form not the same. Why? The problem I am facing is that if you incorrectly enter your email in the first input "eMail" and correctly in the seco ...

What's the secret behind generating a crisp 400 on paper?

Understanding Why it Prints 400 I'm struggling to comprehend the logic behind this var x = {}, y = { key: "y" }, z = { key: "z" }; x[y] = 100; x[z] = 200; console.log(x[y] + x[z]); ...