Alter appearance using various classes

I am seeking assistance in changing the font of text using classes. I have multiple texts with different classes and I want to be able to edit all the texts without adding another dropdown menu. I believe that the change needs to occur in a script. Please help me.

$("#fs").change(function() {
    //alert($(this).val());
    $('.boy').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.boy').css("font-size", $(this).val() + "px");
});
<div id="something" class="boy">hello world</div>
<div id="something1" class="boy1">hello world</div>
<div id="something2" class="boy2">hello world</div>

<form method="post" action="<?php echo $PHP_SELF;?>">
 
   
 
    <select id="fs"> 
        <option value="Agency FB">Agency FB</option>
        <option value="Algerian">Algerian</option>
        <option value="AR Berkley">AR Berkley</option>
        <option value="AR Blanca">AR Blanca</option>
        <option value="AR Bonnie">AR Bonnie</option>
        <option value="AR Carter">AR Carter</option>
        
     
    </select>
    
    <select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="18">18</option>
        <option value="20">20</option>
        <option value="22">22</option>
        <option value="24">24</option>

        
    </select>


 
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">
javascriptjqueryhtmlcss

Answer №1

To maintain consistent font styling, it is recommended to use the same class for all div elements.

$("#fs").change(function() {
  //alert($(this).val());
  $('.boy').css("font-family", $(this).val());

});

$("#size").change(function() {
  $('.boy').css("font-size", $(this).val() + "px");
});
<div id="something" class="boy">hello world</div>
<div id="something1" class="boy">hello world</div>
<div id="something2" class="boy">hello world</div>

<form method="post" action="<?php echo $PHP_SELF;?>">

  <select id="fs">
    <option value="Agency FB">Agency FB</option>
    <option value="Algerian">Algerian</option>
    <option value="Arial">Arial</option>
    <option value="AR Blanca">AR Blanca</option>
    <option value="AR Bonnie">AR Bonnie</option>
    <option value="AR Carter">AR Carter</option>
  </select>

  <select id="size">
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="18">18</option>
    <option value="20">20</option>
    <option value="22">22</option>
    <option value="24">24</option>

  </select>


</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

Answer №2

$(“body”).find(“.content”).css(“font-size”,”16px”);

It's recommended to avoid using the * selector for better efficiency.

Answer №3

If you're unsure, there are two methods that might work for you: Method 1: One option is to add multiple classes in the jQuery selector and change the font using CSS method. 

$(".boy,.boy2.boy3").css("font-family", $(this).val());

Method 2: To avoid constantly adding multiple classes, you can wrap all your divs inside another div like this:

<div id="wrapper">
   <div id="something" class="boy">hello world</div>
   <div id="something1" class="boy1">hello world</div>
   <div id="something2" class="boy2">hello world</div>
</div>

And then apply a jQuery selector over it like so:

$("#wrapper >div").css("font-family", $(this).val());

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

Vue.js: Utilizing async/await in Vue.js results in an observer being returned

Currently, I'm attempting to retrieve data from an API and store it in an array. The issue arises when I try to log the response data from the API - the data is displayed just fine. I assign the value of a variable to the data obtained from awaiting t ...

javascriptvue.jsasync-await

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

javascriptjqueryruby-on-railsajaxforms

Laravel is unable to interpret formData

I've been on a quest to find answers, but so far I'm coming up empty. I'm trying to send file input to a Laravel controller via Ajax, but it seems like the controller can't read the data at all. Here is my Ajax code: let fd = n ...

javascriptphpjqueryajaxlaravel

Utilizing AJAX to invoke a function

I'm having trouble explaining this, but I'll try my best. I created a function that calculates the remaining amount needed to qualify for free delivery based on different basket value thresholds. Whenever a product is added to the basket, the b ...

javascriptjqueryajax

I am having issues with Tailwind CSS overriding the responsive padding on my website

I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...

cssreactjsnext.jsresponsive-designtailwind-css

What is the best way to interact with the dynamic Twitter follow button using Selenium and Python?

Trying to interact with Twitter's follow button can be challenging, especially when it is dynamic and has attributes that are not well-documented in the Selenium documentation. Below is a snippet of the HTML code for the button: Below you will see my ...

pythonhtmlselenium

HTML 5 - GRUNT BUILD: The error message "Fatal error: Object has no method 'compact'" is causing issues with the build process

Currently, I am working on a project using GRUNT. However, I encountered an error while building the project: Running "cuff:dev" (cuff) task >> Building src/pages/home Fatal error: Object home.less has no method 'compact' The erro ...

htmlgruntjsnpm

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

javascriptcssangularjshighcharts

Aligning navigation text in a grid layout

I am currently working on evenly distributing my 8 navigation links across the navigation bar. Below is the HTML code for my navigation: <nav> <ul class="nav"> <li><a href="index.html">Home</a></li> < ...

htmlcssnavcentering

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

htmlangulartypescript

Prevent unauthorized access to HTML pages with a secure login system

I created a basic login system using JavaScript that requires users to enter the correct username and password. Once verified, they are redirected to log1.html. From there, they can access various subpages such as log1-sub.html. However, I am struggling to ...

html

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

My attempt to send a GET request to the Mongo works fine, but I'm having trouble getting the PUT request to work. My suspicion is that there might be an issue with the path from the controller to the router. I've already tried using both update() ...

javascriptangularjsmongodbmongoosecrud

Having trouble with the repeat-item animation feature not functioning correctly

Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue? Here is the CSS code: .repeat-item.ng-enter, .repeat-item.ng-leave ...

cssangularjsanimationangularjs-ng-repeatcss-animations

I'm currently leveraging Vue.js and Python Flask for my backend development. I'm looking to establish some local variables. What is the best way to accomplish this?

Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout. <template> <div> <div class="glob ...

javascriptvue.js

Encountering the error "undefined object" while using the yield keyword in JavaScript

var pi = document.getElementById("pi"); function * calculatePi(){ let q = 1; let r = 0; let t = 1; let k = 1; let n = 3; let l = 3; while (true){ if (4*q+r-t < n*t){ alert(n); yield n; ...

javascripthtmlgeneratoryield

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

javascripthtmlcss

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Ag-Grid: Matching colors with filtering functionality

Can AG-Grid be configured to highlight matching cells during quick filtering? For example, if I have the following data: [ { firstName: 'Tom', lastName: 'Doe', company: 'Tesla' }, { firstName: 'Tim', lastName: & ...

javascriptmaterial-uiag-gridhighlightag-grid-react

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

What is the best way to implement a custom toast delay in a React application using setTimeout

The concept is straightforward: When the function showToast is called, I aim to change my toast's className to show, and then remove it by replacing with an empty string after displaying it for 3 seconds. HTML: <div id="toast">New col ...

javascriptreactjs