Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements?

Answer №1

If you want to retrieve font-size values from HTML elements, you can try using the following code:

Find more information here: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

var paragraphs = document.getElementsByTagName("p");
var fontSizes = [];
for(var i=0; i<paragraphs.length; i++) {
    var style = window.getComputedStyle(paragraphs[i], null);
    fontSizes.push(style['font-size']);
}

console.log(fontSizes);

Check out this demo for a live example: http://jsfiddle.net/1us76t0g/1/

Even if there are no inline styles defined, this method allows you to gather font-size values into an array.

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

Issue with PassportJs not forwarding users after successful authentication

I'm facing some challenges with implementing Passport for authentication. I have set up my signup strategy in the following way: passport.use('local_signup', new localStrategy({ usernameField: 'username', passwordField:&apo ...

Stopping the execution of code in Node.js after returning a JSON response

When a user is not found, the code still continues executing after sending the JSON response. The JSON response is generated in a separate class and returned from there. var user = new UserClass(obj, null); var userObj = user.getUser(res, req, 'user ...

Utilizing Capture Groups in CSS File for Regex Search and Replace

When it comes to extracting critical styles from a CSS file wrapped in a @critical rule, I run into some issues: @critical { .foo { ... } @media bar { ... } } The command I'm using for extraction involves sed search ...

sending numerous ajax requests and they all seem to be returning identical results

When firing multiple ajax requests using the setinterval() function, I noticed that both requests are bringing back the same information from another page. Here is the JavaScript code: function views() { setInterval(function(){var xmllhttp //alert ...

Utilizing the Fetch API to retrieve a Flickr feed in JSON structure

When interacting with the flicker feed API, I have successfully received a JSON response using $.getJSON. However, when attempting to use Fetch instead, only an XML response seems to be retrieved. Example of working with $.getJSON: var flickerAPI = "http ...

"Trying to access the Reducer in a container results in an undefined value

I recently tried adding a new Container to my React App, connected it with Redux, and wanted to test if everything was functioning properly. Unfortunately, when I try to access the reducer using this.props.selection, it returns as undefined. This is puzzli ...

My website crashed after attempting to update WordPress

After upgrading my website to Wordpress 3.4, I encountered a major issue that caused significant damage to my site. It seems that half of my posts were not accessible and resulted in a 404 error. Additionally, pages 3 and 4 of my posts also showed a 404 er ...

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API. Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue). var startDate = "2020-09-20"; var ...

Switch between selection modes in React JS DataGrid using Material UI with the click of a button

I've been working on creating a datagrid that includes a switch button to toggle between simple and multiple selection modes. const dispatch = useDispatch(); const { selectedTransaction } = useSelector(...) const [enableMultipleSelection, setEnableMu ...

Unexpected state being returned by Vuex

I am encountering an issue with a pop-up modal that is not behaving as expected. The condition for the pop-up to appear is if the user has no transactions, which is determined by checking the length of the depositHistory array. If the length is greater tha ...

Utilize Electron's fs to stream a file directly to an HTML video player while it is being downloaded

I am currently exploring the possibility of using the HTML video player to stream a file from the file system within Electron. My goal is to initiate streaming while the file is still being downloaded. I am uncertain whether my current approach will be ...

Captivating images paired with informative captions

I am trying to display a picture with a description inline, but I am facing some issues. While I was able to align two pictures using div block:inline, adding a description to the first picture caused it to extend in width (despite setting margin: 0 and a ...

angular: setting default selected items in dynamically generated options

After looking at the example provided here, I noticed that all three select options have the same value. How can I ensure that each option has a different selected value? This is what I currently have: <li ng-repeat="tarea in tareas"> <inp ...

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

Capturing user input in HTML and passing it to JavaScript

I have a good grasp on how to implement input in HTML to execute JavaScript functions that are defined in the same directory as the HTML file. For example: <input type="button" value="Submit" onclick="someFunc(500)" > When the button is clicked, th ...

Developing a transparent "cutout" within a colored container using CSS in React Native (Layout design for a QR code scanner)

I'm currently utilizing react-native-camera for QR scanning, which is functioning properly. However, I want to implement a white screen with opacity above the camera, with a blank square in the middle to indicate where the user should scan the QR code ...

using jQuery to show a block element

I'm attempting to determine whether a div with the style display as block then perform an action. Here is an example: This is just an idea I'm trying to implement using jQuery. if ($("#toshow").css("display") == "block"){ }else{ } ...

React: Remember to always retain the initial four characters when making changes

I have implemented an input component for phone numbers using the react native phone input library, which automatically adds the international code. However, I am facing an issue where the international code +234 is deleted when the user presses the back b ...