Home > Web Front-end > CSS Tutorial > How Can I Get the Applied Font in CSS When It\'s Not Explicitly Defined?

How Can I Get the Applied Font in CSS When It\'s Not Explicitly Defined?

Barbara Streisand
Release: 2024-12-01 21:43:10
Original
707 people have browsed it

How Can I Get the Applied Font in CSS When It's Not Explicitly Defined?

Obtaining the Applied Font When Undefined in CSS

In web development, it may be necessary to access the actual font used to render an element when CSS does not explicitly specify it. This can occur in cases where the text is inherited from default styles or hidden within the system or browser's default settings.

To retrieve this information, you can utilize the getComputedStyle function:

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}
Copy after login

This function takes two parameters: an element and a CSS property. For example, to determine the font size of an object, you would use:

css(object, 'font-size') // returns '16px' for instance
Copy after login

It's important to note that this method is not supported by IE8.

Live Demonstration:

[JS Fiddle Demo](http://jsfiddle.net/4mxzE/)

This demo showcases the usage of the css function in a practical application. It renders a div element with a custom font and utilizes the function to log the applied font in the browser's console.

The above is the detailed content of How Can I Get the Applied Font in CSS When It\'s Not Explicitly Defined?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template