HTML DOM isSameNode() Method

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 isSameNode() Method

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML DOM Window resizeTo() Method

The HTML Window resizeTo() Method is used to resize a window to the specified width and height. Syntax: window.resizeTo(width, height) Parameters: width: Sets the width of the window, in pixels.height: Sets the height of the window, in pixels. Example: In this example, we will resize the window by u

HTML DOM Video load( ) Method

The Video load() method is used for re-loading the video element, updating it after the source or setting changes. It ensures changes take effect and the video reflects updated configurations. Syntax: videoObject.load()HTML DOM Video load( ) Method ExamplesExample: In this example, we display a vide

JavaScript Window getComputedStyle() Method

The getComputedStyle() method is used to get all the computed CSS property and values of the specified element. The use of computed style is displaying the element after stylings from multiple sources have been applied. The getComputedStyle() method returns a CSSStyleDeclaration object. Syntax: wind

HTML DOM isSameNode() Method

The isSameNode() method checks whether the two nodes are the same or not. This method is different from isequalNode(), where two different nodes can be equal but not the same, here the same node means that they are referencing the same object. Syntax: node.isSameNode(othernode) Parameters: The "othe

HTML DOM Window screenTop Property

The Window screenTop property is used for returning the 'y' or vertical coordinate of a window relative to a screen. It returns a number which represents the vertical coordinate of a window relative to a screen.Syntax: window.screenTop Return Value: It returns a number that represents the window hor

HTML DOM Window top( ) Property

The Window top() property is used to return the topmost browser window of a current window. It is a read-only property and it returns a reference to the topmost window in the window hierarchy.Syntax: window.top Return Value: It returns the reference of the topmost window in the window hierarchy. Bel

HTML DOM Window outerWidth Property

TheÂ window outerWidth propertyÂ is used for returning the outer width of the browser window. It includes all the interface elements such as toolbars, scrollbars, etc. It is a read-only property and returns a number which represents the width of the browserâ€™s window in pixels.Â Syntaxwindow.outerWidthR

HTML | DOM Video muted Property

The Video muted property is used for setting or returning whether the audio output of the video should be muted or not. Syntax: For returning the muted property:videoObject.mutedFor setting the muted property:videoObject.muted = true|false Property Values: true|false: It is used to specify whether t

How to mute video using HTML5 ?

The purpose of this article is to mute video using HTML5. Approach: Video Tag is new to HTML5. Users can use muted attributes in video tags to mute a video. The muted attribute is a boolean attribute. When present, it specifies that the audio output of the video should be muted. Syntax: <video co

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