Adjust font size using jQuery and CSS styles

I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page.

  1. Some tags on the page have font-sizes specified in percentages (%).
  2. Others are assigned sizes in pixels (px).

I'm attempting to create a font resizer that functions properly.

$('.internal-article *').each(function( index ) {
 var FontSize = $(this).css("fontSize");
 var FontSize = parseFloat(FontSize, 10);
 FontSize = FontSize + 1;
 $(this).css("font-size",FontSize+"px");
});

This approach doesn't work for pages where fonts are specified in pixels since it references the parent element's font size, which may have already been increased during the traversal process.

If you have any suggestions or insights, please share them with me. Thank you!

Answer №1

attempt to modify this:

let textSize = $(this).css("sizeOfFont");

change it to:

let textSize = $(this).css("font-size");

this solution has proven effective for me: SEE DEMO

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

Creating a div larger in size than the wrapper

Would it be feasible to have a container with a width of 1000px;, while simultaneously having a DIV inside the container that has a width of 100%? Is that achievable in any way? Here is a snippet of my code: <div class="block1"> <img src="i ...

Click the button to reset all selected options

<form method="post" action="asdasd" class="custom" id="search"> <select name="sel1" id="sel1"> <option value="all">all</option> <option value="val1">val1</option> <option value="val2" selected="selected"> ...

Exploring the process of dynamically inserting choices into an array of HTML dropdown menus using a combination of Php, AJAX, and jQuery

My task involves populating an HTML array of 10 select fields with jQuery every time a div-popup is called. The purpose of this form is to facilitate the batch approval of staffing requests for hundreds of employees by upper management, organized by depart ...

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

Incorporating text sections into a div container and adjusting the width

Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...

What could be the reason that my Bootstrap design is displaying narrower than the designated container?

Having some issues with a JavaScript code that involves innerHTML, causing a discrepancy in width compared to the CSS and Bootstrap rules I have set up. Below is the JavaScript code snippet: let numeroStreams = document.getElementById('num') let ...

How to Implement Transition Effect for Height Changes on v-if in Vuejs

I have a code snippet that effectively animates a v-if element by reducing its height to 0px. The animation is working well, but the issue arises when I need to specify the initial height of the element in CSS. While this is fine for a single element, I ...

What is the best way to horizontally center an absolute button within a div?

I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach: .mc-item { background: #F0F0F0; border: 1px solid #DDD; height: 1 ...

Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

Eliminate the lower boundary of a divisional table

I'm having an issue with displaying images in a div table. Each image has a border at the bottom, which is around 2-5 pixels wide. Unfortunately, as a new user, I am unable to send any images. My main goal is to remove this unwanted border from the ...

Is it possible to fetch all the content contained within each set of <p> and </p> tags within a specific ID?

I've been trying to extract text between two specific <p> tags in HTML, but my code is only returning the text between a single tag. Here's what I have so far: > var myHTMLString = try String(contentsOf: myURL, encoding: .as ...

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

Is there a way to determine if my great-grandfather has a class attribute that includes a specific word?

Looking for some assistance with my HTML code snippet: <div class='one two three and etc.'> <div> <div> <div class='my_target'> </div> </div> ...

Replicate the process of transferring table rows to the clipboard, but exclusively copying the contents

Currently, I am attempting to copy a paginated table to my clipboard by referring to this guide: Select a complete table with Javascript (to be copied to clipboard). However, the issue lies in the fact that it only copies the data from the first page. In ...

Adjust the text according to the selected checkbox option

I am attempting to update the displayed text based on whether a checkbox is currently checked or not. The value of the viewable text should reflect the user's selection. I believe I am close, but the functionality is not working as expected. <html ...

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...