HTML DOM Source media Property

HTML | window matchMedia() Method

Last Updated : 21 Nov, 2019

The window.matchMedia() method in html is used to return a MediaQueryList object which represents the result of the specified CSS media query string. The value of the matchMedia() method can be any of the media options of the CSS @media rule, like min-height, min-width, orientation, etc. The MediaQueryList object has two properties and two methods:

Property:
- matches: It is used to check the results of a query and it returns a boolean value.
- media: A String which represent the serialized media query list.
Method:
- addListener(functionref): Adds a new listener function, which is executed whenever the media query's evaluated result changes.
- removeListener(functionref): Removes a previously additional listener function from the media query list. Does nothing if the specified listener is not already in the list.

Syntax:

window.matchMedia( mediaQueryString )

Parameter Values:

mediaQueryString: String which represents the media query for which to return a new MediaQueryList object.

Return Value: This method returns the CSS media query string. Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>Window matchMedia() Method</title>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeesks</h1>
        <h2>Window matchMedia() Method</h2>

        <script>
            function GFGFun(ar) {
                if (ar.matches) {
                    document.body.style.backgroundColor = "white";
                } else {
                    document.body.style.backgroundColor = "gray";
                }
            }

            var ar = window.matchMedia("(max-width: 850px)")
            GFGFun(ar)
            ar.addListener(GFGFun)
        </script>
    </center>
</body>

</html>

Output:

Before resize the browser window:
After resize the browser window:

Supported Browsers: The browsers supported by HTML window matchMedia() method are listed below:

Google Chrome
Internet Explorer
Firefox
Apple Safari
Opera

HTML DOM Source media Property

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML | DOM Video mediaGroup Property

The Video mediaGroup property is used for setting or returning the name of the media group the video is a part of. Two or more <video> elements can be synchronized together using a media group. The Video mediaGroup property returns a string which represents the media group of the video. Syntax

HTML DOM Source media Property

The HTML DOM Source media Property is used to set or return the value of the media attribute of the <source> element. The <source> media attribute is used to accept any valid media query that would normally be defined in a CSS. This attribute can accept several values. Syntax: It is used

HTML | DOM Window frameElement Properties

HTML DOM Window frameElement property returns the iframe element in which the window is embedded or stored. If it is not stored, in that case, it simply returns a null value. Syntax: window.frameElement Return Value: It returns an IFrame object or null. Example: html <!DOCTYPE html> <html

How to Embed Multimedia in HTML ?

A variety of tags such as the <img> tag, <video> tag, and <audio> tag are available in HTML to include media on your web page. Multimedia combines different media, such as images, audio, and videos. Users will have a better experience when multimedia is embedded into HTML. Early we

Spectre Media Video

The Spectre Media element includes responsive images and video. In this article we will discuss about the video media. To make the video responsive we need to add the video-responsive class to <video> elements. We can manipulate the video ration for that we have to use other classes. The defau

Web API HTMLMediaElement captureStream() Method

The HTMLMediaElement API provides the properties and methods required to implement fundamental media-related capabilities that are common to audio and video. The captureStream() method is used to perform a real-time capture of the content being rendered in the media element.Syntax:captureStream()Par