🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 53 (from laksa051)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa053.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility\')), getAhrefsUnparsedNoserviceFromURL(\'https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility","crawl_time":1775694356,"first_indexed_time":1681709091,"http_code":200,"src_unparsed":"org,mozilla!developer,\/en-US\/docs\/Web\/API\/Element\/checkVisibility s443","src_root_hash":"7082249407640205653","history_drop_reason":null,"meta_title":"Element: checkVisibility() method - Web APIs | MDN","meta_descriptions":["The checkVisibility() method of the Element interface checks whether the element is visible."],"attrs_boilerpipe_text":"Baseline\n2024\nNewly available\nSince March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.\nLearn more\nSee full compatibility\nReport feedback\nThe\ncheckVisibility()\nmethod of the\nElement\ninterface checks whether the element is visible.\nThe method returns\nfalse\nin either of the following situations:\nThe element doesn't have an associated box, for example because the CSS\ndisplay\nproperty is set to\nnone\nor\ncontents\n.\nThe element is not being rendered because the element or an ancestor element sets the\ncontent-visibility\nproperty to\nhidden\n.\nThe optional parameter enables additional checks to test for other interpretations of what \"visible\" means.\nFor example, you can further check whether an element has an opacity of\n0\n, if the value of the element\nvisibility\nproperty makes it invisible, or if the element\ncontent-visibility\nproperty has a value of\nauto\nand its rendering is currently being skipped.\nSyntax\njs\ncheckVisibility(options)\nParameters\noptions\nOptional\nAn object indicating additional checks to run.\nThe possible options are:\ncontentVisibilityAuto\ntrue\nto check if the element\ncontent-visibility\nproperty has (or inherits) the value\nauto\n, and it is currently skipping its rendering.\nfalse\nby default.\nopacityProperty\ntrue\nto check if the element\nopacity\nproperty has (or inherits) a value of\n0\n.\nfalse\nby default.\nvisibilityProperty\ntrue\nto check if the element is invisible due to the value of its\nvisibility\nproperty.\nfalse\nby default.\ncheckOpacity\nA historic alias for\nopacityProperty\n.\ncheckVisibilityCSS\nA historic alias for\nvisibilityProperty\n.\nReturn value\nfalse\nif any of the following conditions are met, otherwise\ntrue\n:\nThe element doesn't have an associated box.\nThe element\ncontent-visibility\nproperty has (or inherits) a value of\nhidden\n.\nopacityProperty\n(or\ncheckOpacity\n) is\ntrue\nand the element\nopacity\nproperty has (or inherits) a value of\n0\n.\nvisibilityProperty\n(or\ncheckVisibilityCSS\n) is\ntrue\nand the element is invisible due to the value of its\nvisibility\nproperty.\ncontentVisibilityAuto\nis\ntrue\n, the\ncontent-visibility\nproperty has (or inherits) a value of\nauto\n, and element rendering is being skipped.\nExamples\nTest checkVisibility() with varied CSS\nThe following example allows you to test how the result of\ncheckVisibility()\nmight change with different values for\ndisplay\n,\ncontent-visibility\n,\nvisibility\n, and\nopacity\nCSS properties.\nHTML\nThe HTML defines a\n<select>\nelement for the CSS properties that affect the results of\ncheckVisibility()\n.\nThe first (default selected) values should result in\ncheckVisibility()\nreturning\ntrue\nwhen applied to an element, while the other values affect the visibility.\nhtml\n<select id=\"css_display\" name=\"css_display\">\n  <option value=\"block\" selected>display: block<\/option>\n  <option value=\"none\">display: none<\/option>\n  <option value=\"contents\">display: contents<\/option>\n<\/select>\n\n<select id=\"css_content_visibility\" name=\"css_content_visibility\">\n  <option value=\"visible\" selected>content-visibility: visible<\/option>\n  <option value=\"hidden\">content-visibility: hidden<\/option>\n  <option value=\"auto\">content-visibility: auto<\/option>\n<\/select>\n\n<select id=\"css_opacity\" name=\"css_opacity\">\n  <option value=\"1\" selected>opacity: 1<\/option>\n  <option value=\"0\">opacity: 0<\/option>\n<\/select>\n\n<select id=\"css_visibility\" name=\"css_visibility\">\n  <option value=\"visible\" selected>visibility: visible<\/option>\n  <option value=\"hidden\">visibility: hidden<\/option>\n  <option value=\"collapse\">visibility: collapse<\/option>\n<\/select>\nNext we have a\n<pre>\nthat is used to output the result of the\ncheckVisibility()\ncheck when no options are passed in the parameter, and for each separate option value.\nAt the end we have the element that will be tested (to which we will apply the selected CSS property values).\nhtml\n<pre id=\"output_result\"><\/pre>\n<div id=\"test_element\">The element to be checked for visibility.<\/div>\nCSS\nThe CSS just highlights the element to be tested.\ncss\n#test_element {\n  border: solid;\n  border-color: blue;\n}\nJavaScript\nThe code below gets each of the\n<select>\nelements.\nThe\nupdateCSS()\nmethod is called on start and whenever the select elements change in order to apply the selected CSS to the target element,\njs\nconst displayCssSelect = document.getElementById(\"css_display\");\nconst contentVisibilityCssSelect = document.getElementById(\n  \"css_content_visibility\",\n);\nconst displayCssOpacity = document.getElementById(\"css_opacity\");\nconst displayCssVisibility = document.getElementById(\"css_visibility\");\n\nconst outputResult = document.getElementById(\"output_result\");\nconst elementToCheck = document.getElementById(\"test_element\");\n\nupdateCSS();\n\nconst cssSelectors = document.querySelectorAll(\"select\");\ncssSelectors.forEach((select) => {\n  select.addEventListener(\"change\", (event) => {\n    updateCSS();\n  });\n});\n\nfunction updateCSS() {\n  \/\/ Apply selected CSS properties to target element\n  elementToCheck.style.display = displayCssSelect.value;\n  elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;\n  elementToCheck.style.opacity = displayCssOpacity.value;\n  elementToCheck.style.visibility = displayCssVisibility.value;\n\n  \/\/ Call checkVisibility() on element using default and each of options\n  const defaultVisibilityCheck = elementToCheck.checkVisibility();\n  const opacityVisibilityCheck = elementToCheck.checkVisibility({\n    opacityProperty: true,\n  });\n  const cssVisibilityCheck = elementToCheck.checkVisibility({\n    visibilityProperty: true,\n  });\n  const contentVisibilityAutoCheck = elementToCheck.checkVisibility({\n    contentVisibilityAuto: true,\n  });\n\n  \/\/ Output the results of the tests\n  outputResult.innerText = `Checks on element below (may be hidden):\n- Result of checkVisibility(): ${defaultVisibilityCheck}\n- Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck}\n- Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck}\n- Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`;\n}\nResult\nThe results are shown below.\nIf you change the selection the results will be applied to the test element (blue outline) and the results of the\ncheckVisibility()\nfor each setting should be displayed.\nSo for example, if you set the\nopacity: 0\nthat test (only) should indicate\nfalse\n.\nHowever if you set\ndisplay: none\nthen all tests should return\nfalse\n.\nSpecifications\nSpecification\nCSSOM View Module\n# dom-element-checkvisibility\nBrowser compatibility","attrs_markdown":"- [Skip to main content](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#content)\n- [Skip to search](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#search)\n\nHTML\n\n[HTML: Markup language](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML)\n\nHTML reference\n\n- [Elements](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements)\n- [Global attributes](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Global_attributes)\n- [Attributes](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference \"See all HTML references\")\n\nHTML guides\n\n- [Responsive images](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Guides\/Responsive_images)\n- [HTML cheatsheet](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Guides\/Cheatsheet)\n- [Date & time formats](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Guides\/Date_and_time_formats)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Guides \"See all HTML guides\")\n\nMarkup languages\n\n- [SVG](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG)\n- [MathML](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/MathML)\n- [XML](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/XML)\n\nCSS\n\n[CSS: Styling language](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS)\n\nCSS reference\n\n- [Properties](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties)\n- [Selectors](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Selectors)\n- [At-rules](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/At-rules)\n- [Values](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Values)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference \"See all CSS references\")\n\nCSS guides\n\n- [Box model](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Box_model\/Introduction)\n- [Animations](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Animations\/Using)\n- [Flexbox](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Flexible_box_layout\/Basic_concepts)\n- [Colors](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Colors\/Applying_color)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides \"See all CSS guides\")\n\nLayout cookbook\n\n- [Column layouts](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/How_to\/Layout_cookbook\/Column_layouts)\n- [Centering an element](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/How_to\/Layout_cookbook\/Center_an_element)\n- [Card component](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/How_to\/Layout_cookbook\/Card)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/How_to\/Layout_cookbook)\n\nJavaScriptJS\n\n[JavaScript: Scripting language](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript)\n\nJS reference\n\n- [Standard built-in objects](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects)\n- [Expressions & operators](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators)\n- [Statements & declarations](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements)\n- [Functions](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference \"See all JavaScript references\")\n\nJS guides\n\n- [Control flow & error handing](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Control_flow_and_error_handling)\n- [Loops and iteration](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Loops_and_iteration)\n- [Working with objects](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Working_with_objects)\n- [Using classes](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_classes)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide \"See all JavaScript guides\")\n\nWeb APIs\n\n[Web APIs: Programming interfaces](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API)\n\nWeb API reference\n\n- [File system API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/File_System_API)\n- [Fetch API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)\n- [Geolocation API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation_API)\n- [HTML DOM API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTML_DOM_API)\n- [Push API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Push_API)\n- [Service worker API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API \"See all Web API guides\")\n\nWeb API guides\n\n- [Using the Web animation API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Animations_API\/Using_the_Web_Animations_API)\n- [Using the Fetch API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\/Using_Fetch)\n- [Working with the History API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History_API\/Working_with_the_History_API)\n- [Using the Web speech API](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Speech_API\/Using_the_Web_Speech_API)\n- [Using web workers](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers)\n\nAll\n\n[All web technology](https:\/\/developer.mozilla.org\/en-US\/docs\/Web)\n\nTechnologies\n\n- [Accessibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility)\n- [HTTP](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP)\n- [URI](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/URI)\n- [Web extensions](https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions)\n- [WebAssembly](https:\/\/developer.mozilla.org\/en-US\/docs\/WebAssembly)\n- [WebDriver](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/WebDriver)\n- [See all…](https:\/\/developer.mozilla.org\/en-US\/docs\/Web \"See all web technology references\")\n\nTopics\n\n- [Media](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media)\n- [Performance](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance)\n- [Privacy](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Privacy)\n- [Security](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security)\n- [Progressive web apps](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Progressive_web_apps)\n\nLearn\n\n[Learn web development](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development)\n\nFrontend developer course\n\n- [Getting started modules](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Getting_started)\n- [Core modules](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core)\n- [MDN Curriculum](https:\/\/developer.mozilla.org\/en-US\/curriculum\/)\n- [Check out the video course from Scrimba, our partner](https:\/\/scrimba.com\/frontend-path-c0j?via=mdn-learn-navbar)\n\nLearn HTML\n\n- [Structuring content with HTML module](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Structuring_content)\n\nLearn CSS\n\n- [CSS styling basics module](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Styling_basics)\n- [CSS layout module](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/CSS_layout)\n\nLearn JavaScript\n\n- [Dynamic scripting with JavaScript module](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Scripting)\n\nTools\n\nDiscover our tools\n\n- [Playground](https:\/\/developer.mozilla.org\/en-US\/play)\n- [HTTP Observatory](https:\/\/developer.mozilla.org\/en-US\/observatory)\n\n- [Border-image generator](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Backgrounds_and_borders\/Border-image_generator)\n- [Border-radius generator](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Backgrounds_and_borders\/Border-radius_generator)\n- [Box-shadow generator](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Backgrounds_and_borders\/Box-shadow_generator)\n- [Color format converter](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Colors\/Color_format_converter)\n- [Color mixer](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Colors\/Color_mixer)\n- [Shape generator](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Shapes\/Shape_generator)\n\nAbout\n\nGet to know MDN better\n\n- [About MDN](https:\/\/developer.mozilla.org\/en-US\/about)\n- [Advertise with us](https:\/\/developer.mozilla.org\/en-US\/advertising)\n\n- [Community](https:\/\/developer.mozilla.org\/en-US\/community)\n- [MDN on GitHub](https:\/\/github.com\/mdn)\n\n[Blog](https:\/\/developer.mozilla.org\/en-US\/blog\/)\n\n1. [Web](https:\/\/developer.mozilla.org\/en-US\/docs\/Web)\n2. [Web APIs](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API)\n3. [Element](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element)\n4. [checkVisibility()](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility)\n\n# Element: checkVisibility() method\nBaseline  2024\n\nNewly available\n\nSince March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.\n\n- [Learn more](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility)\n- [See full compatibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#browser_compatibility)\n- [Report feedback](https:\/\/survey.alchemer.com\/s3\/7634825\/MDN-baseline-feedback?page=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&level=low)\n\nThe **`checkVisibility()`** method of the [`Element`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element) interface checks whether the element is visible.\n\nThe method returns `false` in either of the following situations:\n\n- The element doesn't have an associated box, for example because the CSS [`display`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display) property is set to [`none`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display#none) or [`contents`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display#contents).\n- The element is not being rendered because the element or an ancestor element sets the [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property to [`hidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#hidden).\n\nThe optional parameter enables additional checks to test for other interpretations of what \"visible\" means. For example, you can further check whether an element has an opacity of `0`, if the value of the element [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property makes it invisible, or if the element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has a value of [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto) and its rendering is currently being skipped.\n\n## In this article\n- [Syntax](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#syntax)\n- [Examples](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#examples)\n- [Specifications](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#specifications)\n- [Browser compatibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#browser_compatibility)\n\n## [Syntax](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#syntax)\njs\n```\ncheckVisibility(options)\n```\n\n### [Parameters](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#parameters)\n[`options` Optional](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#options)\n\nAn object indicating additional checks to run. The possible options are:\n\n[`contentVisibilityAuto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#contentvisibilityauto)\n\n`true` to check if the element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) the value [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto), and it is currently skipping its rendering. `false` by default.\n\n[`opacityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#opacityproperty)\n\n`true` to check if the element [`opacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/opacity) property has (or inherits) a value of `0`. `false` by default.\n\n[`visibilityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#visibilityproperty)\n\n`true` to check if the element is invisible due to the value of its [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property. `false` by default.\n\n**Note:** Invisible elements include those that have [`visibility: hidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility#hidden), and some element types that have [`visibility: collapse`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility#collapse).\n\n[`checkOpacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#checkopacity)\n\nA historic alias for [`opacityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#opacityproperty).\n\n[`checkVisibilityCSS`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#checkvisibilitycss)\n\nA historic alias for [`visibilityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#visibilityproperty).\n\n### [Return value](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#return_value)\n`false` if any of the following conditions are met, otherwise `true`:\n\n- The element doesn't have an associated box.\n- The element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) a value of [`hidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility#hidden).\n- `opacityProperty` (or `checkOpacity`) is `true` and the element [`opacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/opacity) property has (or inherits) a value of `0`.\n- `visibilityProperty` (or `checkVisibilityCSS`) is `true` and the element is invisible due to the value of its [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property.\n- `contentVisibilityAuto` is `true`, the [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) a value of [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto), and element rendering is being skipped.\n## [Examples](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#examples)\n### [Test checkVisibility() with varied CSS](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#test_checkvisibility_with_varied_css)\nThe following example allows you to test how the result of `checkVisibility()` might change with different values for `display`, `content-visibility`, `visibility`, and `opacity` CSS properties.\n\n#### HTML\nThe HTML defines a `<select>` element for the CSS properties that affect the results of `checkVisibility()`. The first (default selected) values should result in `checkVisibility()` returning `true` when applied to an element, while the other values affect the visibility.\n\nhtml\n```\n<select id=\"css_display\" name=\"css_display\">\n  <option value=\"block\" selected>display: block<\/option>\n  <option value=\"none\">display: none<\/option>\n  <option value=\"contents\">display: contents<\/option>\n<\/select>\n\n<select id=\"css_content_visibility\" name=\"css_content_visibility\">\n  <option value=\"visible\" selected>content-visibility: visible<\/option>\n  <option value=\"hidden\">content-visibility: hidden<\/option>\n  <option value=\"auto\">content-visibility: auto<\/option>\n<\/select>\n\n<select id=\"css_opacity\" name=\"css_opacity\">\n  <option value=\"1\" selected>opacity: 1<\/option>\n  <option value=\"0\">opacity: 0<\/option>\n<\/select>\n\n<select id=\"css_visibility\" name=\"css_visibility\">\n  <option value=\"visible\" selected>visibility: visible<\/option>\n  <option value=\"hidden\">visibility: hidden<\/option>\n  <option value=\"collapse\">visibility: collapse<\/option>\n<\/select>\n```\n\nNext we have a `<pre>` that is used to output the result of the `checkVisibility()` check when no options are passed in the parameter, and for each separate option value. At the end we have the element that will be tested (to which we will apply the selected CSS property values).\n\nhtml\n```\n<pre id=\"output_result\"><\/pre>\n<div id=\"test_element\">The element to be checked for visibility.<\/div>\n```\n#### CSS\nThe CSS just highlights the element to be tested.\n\ncss\n```\n#test_element {\n  border: solid;\n  border-color: blue;\n}\n```\n#### JavaScript\nThe code below gets each of the `<select>` elements. The `updateCSS()` method is called on start and whenever the select elements change in order to apply the selected CSS to the target element,\n\njs\n```\nconst displayCssSelect = document.getElementById(\"css_display\");\nconst contentVisibilityCssSelect = document.getElementById(\n  \"css_content_visibility\",\n);\nconst displayCssOpacity = document.getElementById(\"css_opacity\");\nconst displayCssVisibility = document.getElementById(\"css_visibility\");\n\nconst outputResult = document.getElementById(\"output_result\");\nconst elementToCheck = document.getElementById(\"test_element\");\n\nupdateCSS();\n\nconst cssSelectors = document.querySelectorAll(\"select\");\ncssSelectors.forEach((select) => {\n  select.addEventListener(\"change\", (event) => {\n    updateCSS();\n  });\n});\n\nfunction updateCSS() {\n  \/\/ Apply selected CSS properties to target element\n  elementToCheck.style.display = displayCssSelect.value;\n  elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;\n  elementToCheck.style.opacity = displayCssOpacity.value;\n  elementToCheck.style.visibility = displayCssVisibility.value;\n\n  \/\/ Call checkVisibility() on element using default and each of options\n  const defaultVisibilityCheck = elementToCheck.checkVisibility();\n  const opacityVisibilityCheck = elementToCheck.checkVisibility({\n    opacityProperty: true,\n  });\n  const cssVisibilityCheck = elementToCheck.checkVisibility({\n    visibilityProperty: true,\n  });\n  const contentVisibilityAutoCheck = elementToCheck.checkVisibility({\n    contentVisibilityAuto: true,\n  });\n\n  \/\/ Output the results of the tests\n  outputResult.innerText = `Checks on element below (may be hidden):\n- Result of checkVisibility(): ${defaultVisibilityCheck}\n- Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck}\n- Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck}\n- Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`;\n}\n```\n#### Result\nThe results are shown below. If you change the selection the results will be applied to the test element (blue outline) and the results of the `checkVisibility()` for each setting should be displayed. So for example, if you set the `opacity: 0` that test (only) should indicate `false`. However if you set `display: none` then all tests should return `false`.\n\n## [Specifications](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#specifications)\n| Specification |\n|---|\n| [CSSOM View Module \\# dom-element-checkvisibility](https:\/\/drafts.csswg.org\/cssom-view-1\/#dom-element-checkvisibility) |\n## [Browser compatibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#browser_compatibility)\n## Help improve MDN\n[Learn how to contribute](https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Community\/Getting_started)\n\nThis page was last modified on Dec 17, 2025 by [MDN contributors](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility\/contributors.txt).\n\n[View this page on GitHub](https:\/\/github.com\/mdn\/content\/blob\/main\/files\/en-us\/web\/api\/element\/checkvisibility\/index.md?plain=1 \"Folder: en-us\/web\/api\/element\/checkvisibility (Opens in a new tab)\") • [Report a problem with this content](https:\/\/github.com\/mdn\/content\/issues\/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fapi%2Felement%2Fcheckvisibility%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Felement%2Fcheckvisibility%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F0c13af55e869cbc54830fd1a601fd05f60717375%0A*+Document+last+modified%3A+2025-12-17T16%3A01%3A14.000Z%0A%0A%3C%2Fdetails%3E \"This will take you to GitHub to file a new issue.\")\n\n1. [Document Object Model (DOM)](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model)\n2. [`Element`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element)\n3. Instance properties\n   \n   1. [`ariaActiveDescendantElement`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaActiveDescendantElement)\n   2. [`ariaAtomic`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaAtomic)\n   3. [`ariaAutoComplete`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaAutoComplete)\n   4. [`ariaBrailleLabel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaBrailleLabel)\n   5. [`ariaBrailleRoleDescription`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaBrailleRoleDescription)\n   6. [`ariaBusy`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaBusy)\n   7. [`ariaChecked`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaChecked)\n   8. [`ariaColCount`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaColCount)\n   9. [`ariaColIndex`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaColIndex)\n   10. [`ariaColIndexText`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaColIndexText)\n   11. [`ariaColSpan`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaColSpan)\n   12. [`ariaControlsElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaControlsElements)\n   13. [`ariaCurrent`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaCurrent)\n   14. [`ariaDescribedByElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaDescribedByElements)\n   15. [`ariaDescription`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaDescription)\n   16. [`ariaDetailsElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaDetailsElements)\n   17. [`ariaDisabled`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaDisabled)\n   18. [`ariaErrorMessageElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaErrorMessageElements)\n   19. [`ariaExpanded`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaExpanded)\n   20. [`ariaFlowToElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaFlowToElements)\n   21. [`ariaHasPopup`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaHasPopup)\n   22. [`ariaHidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaHidden)\n   23. [`ariaInvalid`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaInvalid)\n   24. [`ariaKeyShortcuts`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaKeyShortcuts)\n   25. [`ariaLabel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaLabel)\n   26. [`ariaLabelledByElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaLabelledByElements)\n   27. [`ariaLevel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaLevel)\n   28. [`ariaLive`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaLive)\n   29. [`ariaModal`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaModal)\n   30. [`ariaMultiLine`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaMultiLine)\n   31. [`ariaMultiSelectable`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaMultiSelectable)\n   32. [`ariaOrientation`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaOrientation)\n   33. [`ariaOwnsElements`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaOwnsElements)\n   34. [`ariaPlaceholder`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaPlaceholder)\n   35. [`ariaPosInSet`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaPosInSet)\n   36. [`ariaPressed`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaPressed)\n   37. [`ariaReadOnly`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaReadOnly)\n   38. [`ariaRelevant`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRelevant)\n       Non-standard\n   39. [`ariaRequired`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRequired)\n   40. [`ariaRoleDescription`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRoleDescription)\n   41. [`ariaRowCount`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRowCount)\n   42. [`ariaRowIndex`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRowIndex)\n   43. [`ariaRowIndexText`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRowIndexText)\n   44. [`ariaRowSpan`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaRowSpan)\n   45. [`ariaSelected`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaSelected)\n   46. [`ariaSetSize`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaSetSize)\n   47. [`ariaSort`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaSort)\n   48. [`ariaValueMax`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaValueMax)\n   49. [`ariaValueMin`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaValueMin)\n   50. [`ariaValueNow`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaValueNow)\n   51. [`ariaValueText`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaValueText)\n   52. [`assignedSlot`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/assignedSlot)\n   53. [`attributes`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/attributes)\n   54. [`childElementCount`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/childElementCount)\n   55. [`children`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/children)\n   56. [`classList`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/classList)\n   57. [`className`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/className)\n   58. [`clientHeight`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/clientHeight)\n   59. [`clientLeft`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/clientLeft)\n   60. [`clientTop`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/clientTop)\n   61. [`clientWidth`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/clientWidth)\n   62. [`currentCSSZoom`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/currentCSSZoom)\n   63. [`customElementRegistry`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/customElementRegistry)\n   64. [`elementTiming`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/elementTiming)\n       Experimental\n   65. [`firstElementChild`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/firstElementChild)\n   66. [`id`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/id)\n   67. [`innerHTML`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/innerHTML)\n   68. [`lastElementChild`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/lastElementChild)\n   69. [`localName`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/localName)\n   70. [`namespaceURI`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/namespaceURI)\n   71. [`nextElementSibling`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/nextElementSibling)\n   72. [`outerHTML`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/outerHTML)\n   73. [`part`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/part)\n   74. [`prefix`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/prefix)\n   75. [`previousElementSibling`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/previousElementSibling)\n   76. [`role`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/role)\n   77. [`scrollHeight`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollHeight)\n   78. [`scrollLeft`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollLeft)\n   79. [`scrollLeftMax`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollLeftMax)\n       Non-standard\n   80. [`scrollTop`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollTop)\n   81. [`scrollTopMax`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollTopMax)\n       Non-standard\n   82. [`scrollWidth`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollWidth)\n   83. [`shadowRoot`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/shadowRoot)\n   84. [`slot`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/slot)\n   85. [`tagName`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/tagName)\n4. Instance methods\n   \n   1. [`after()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/after)\n   2. [`animate()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/animate)\n   3. [`append()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/append)\n   4. [`ariaNotify()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/ariaNotify)\n   5. [`attachShadow()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/attachShadow)\n   6. [`before()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/before)\n   7. *[`checkVisibility()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility)*\n   8. [`closest()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/closest)\n   9. [`computedStyleMap()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/computedStyleMap)\n   10. [`getAnimations()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAnimations)\n   11. [`getAttribute()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAttribute)\n   12. [`getAttributeNames()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAttributeNames)\n   13. [`getAttributeNode()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAttributeNode)\n   14. [`getAttributeNodeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAttributeNodeNS)\n   15. [`getAttributeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getAttributeNS)\n   16. [`getBoundingClientRect()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect)\n   17. [`getClientRects()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getClientRects)\n   18. [`getElementsByClassName()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getElementsByClassName)\n   19. [`getElementsByTagName()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getElementsByTagName)\n   20. [`getElementsByTagNameNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getElementsByTagNameNS)\n   21. [`getHTML()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getHTML)\n   22. [`hasAttribute()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/hasAttribute)\n   23. [`hasAttributeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/hasAttributeNS)\n   24. [`hasAttributes()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/hasAttributes)\n   25. [`hasPointerCapture()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/hasPointerCapture)\n   26. [`insertAdjacentElement()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/insertAdjacentElement)\n   27. [`insertAdjacentHTML()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/insertAdjacentHTML)\n   28. [`insertAdjacentText()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/insertAdjacentText)\n   29. [`matches()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/matches)\n   30. [`moveBefore()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/moveBefore)\n   31. [`prepend()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/prepend)\n   32. [`querySelector()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/querySelector)\n   33. [`querySelectorAll()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/querySelectorAll)\n   34. [`releasePointerCapture()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/releasePointerCapture)\n   35. [`remove()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/remove)\n   36. [`removeAttribute()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/removeAttribute)\n   37. [`removeAttributeNode()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/removeAttributeNode)\n   38. [`removeAttributeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/removeAttributeNS)\n   39. [`replaceChildren()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/replaceChildren)\n   40. [`replaceWith()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/replaceWith)\n   41. [`requestFullscreen()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/requestFullscreen)\n   42. [`requestPointerLock()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/requestPointerLock)\n   43. [`scroll()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scroll)\n   44. [`scrollBy()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollBy)\n   45. [`scrollIntoView()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollIntoView)\n   46. [`scrollIntoViewIfNeeded()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollIntoViewIfNeeded)\n       Non-standard\n   47. [`scrollTo()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollTo)\n   48. [`setAttribute()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setAttribute)\n   49. [`setAttributeNode()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setAttributeNode)\n   50. [`setAttributeNodeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setAttributeNodeNS)\n   51. [`setAttributeNS()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setAttributeNS)\n   52. [`setCapture()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setCapture)\n       Non-standard\n       Deprecated\n   53. [`setHTML()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setHTML)\n   54. [`setHTMLUnsafe()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setHTMLUnsafe)\n   55. [`setPointerCapture()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/setPointerCapture)\n   56. [`toggleAttribute()`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/toggleAttribute)\n5. Events\n   \n   1. [`afterscriptexecute`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/afterscriptexecute_event)\n      Non-standard\n      Deprecated\n   2. [`animationcancel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/animationcancel_event)\n   3. [`animationend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/animationend_event)\n   4. [`animationiteration`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/animationiteration_event)\n   5. [`animationstart`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/animationstart_event)\n   6. [`auxclick`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/auxclick_event)\n   7. [`beforeinput`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/beforeinput_event)\n   8. [`beforematch`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/beforematch_event)\n   9. [`beforescriptexecute`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/beforescriptexecute_event)\n      Non-standard\n      Deprecated\n   10. [`beforexrselect`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/beforexrselect_event)\n       Experimental\n   11. [`blur`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/blur_event)\n   12. [`click`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/click_event)\n   13. [`compositionend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/compositionend_event)\n   14. [`compositionstart`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/compositionstart_event)\n   15. [`compositionupdate`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/compositionupdate_event)\n   16. [`contentvisibilityautostatechange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/contentvisibilityautostatechange_event)\n   17. [`contextmenu`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/contextmenu_event)\n   18. [`copy`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/copy_event)\n   19. [`cut`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/cut_event)\n   20. [`dblclick`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/dblclick_event)\n   21. [`DOMActivate`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/DOMActivate_event)\n       Deprecated\n   22. [`DOMMouseScroll`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/DOMMouseScroll_event)\n       Non-standard\n       Deprecated\n   23. [`focus`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/focus_event)\n   24. [`focusin`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/focusin_event)\n   25. [`focusout`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/focusout_event)\n   26. [`fullscreenchange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/fullscreenchange_event)\n   27. [`fullscreenerror`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/fullscreenerror_event)\n   28. [`gesturechange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/gesturechange_event)\n       Non-standard\n   29. [`gestureend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/gestureend_event)\n       Non-standard\n   30. [`gesturestart`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/gesturestart_event)\n       Non-standard\n   31. [`gotpointercapture`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/gotpointercapture_event)\n   32. [`input`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/input_event)\n   33. [`keydown`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/keydown_event)\n   34. [`keypress`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/keypress_event)\n       Deprecated\n   35. [`keyup`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/keyup_event)\n   36. [`lostpointercapture`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/lostpointercapture_event)\n   37. [`mousedown`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mousedown_event)\n   38. [`mouseenter`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mouseenter_event)\n   39. [`mouseleave`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mouseleave_event)\n   40. [`mousemove`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mousemove_event)\n   41. [`mouseout`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mouseout_event)\n   42. [`mouseover`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mouseover_event)\n   43. [`mouseup`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mouseup_event)\n   44. [`mousewheel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/mousewheel_event)\n       Non-standard\n       Deprecated\n   45. [`MozMousePixelScroll`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/MozMousePixelScroll_event)\n       Non-standard\n       Deprecated\n   46. [`paste`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/paste_event)\n   47. [`pointercancel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointercancel_event)\n   48. [`pointerdown`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerdown_event)\n   49. [`pointerenter`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerenter_event)\n   50. [`pointerleave`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerleave_event)\n   51. [`pointermove`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointermove_event)\n   52. [`pointerout`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerout_event)\n   53. [`pointerover`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerover_event)\n   54. [`pointerrawupdate`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerrawupdate_event)\n   55. [`pointerup`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/pointerup_event)\n   56. [`scroll`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scroll_event)\n   57. [`scrollend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollend_event)\n   58. [`scrollsnapchange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollsnapchange_event)\n       Experimental\n   59. [`scrollsnapchanging`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollsnapchanging_event)\n       Experimental\n   60. [`securitypolicyviolation`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/securitypolicyviolation_event)\n   61. [`touchcancel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/touchcancel_event)\n   62. [`touchend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/touchend_event)\n   63. [`touchmove`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/touchmove_event)\n   64. [`touchstart`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/touchstart_event)\n   65. [`transitioncancel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/transitioncancel_event)\n   66. [`transitionend`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/transitionend_event)\n   67. [`transitionrun`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/transitionrun_event)\n   68. [`transitionstart`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/transitionstart_event)\n   69. [`webkitmouseforcechanged`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/webkitmouseforcechanged_event)\n       Non-standard\n   70. [`webkitmouseforcedown`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/webkitmouseforcedown_event)\n       Non-standard\n   71. [`webkitmouseforceup`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/webkitmouseforceup_event)\n       Non-standard\n   72. [`webkitmouseforcewillbegin`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/webkitmouseforcewillbegin_event)\n       Non-standard\n   73. [`wheel`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/wheel_event)\n6. Inheritance\n   \n   1. [`Node`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node)\n   2. [`EventTarget`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget)\n7. Related pages for DOM\n   \n   1. [`AbortController`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortController)\n   2. [`AbortSignal`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortSignal)\n   3. [`AbstractRange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbstractRange)\n   4. [`Attr`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Attr)\n   5. [`CDATASection`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CDATASection)\n   6. [`CharacterData`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CharacterData)\n   7. [`Comment`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Comment)\n   8. [`CustomEvent`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CustomEvent)\n   9. [`DOMError`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMError)\n      Deprecated\n   10. [`DOMException`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMException)\n   11. [`DOMImplementation`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMImplementation)\n   12. [`DOMParser`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMParser)\n   13. [`DOMTokenList`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMTokenList)\n   14. [`Document`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document)\n   15. [`DocumentFragment`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DocumentFragment)\n   16. [`DocumentType`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DocumentType)\n   17. [`Event`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event)\n   18. [`EventTarget`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget)\n   19. [`HTMLCollection`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCollection)\n   20. [`MutationObserver`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MutationObserver)\n   21. [`MutationRecord`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MutationRecord)\n   22. [`NamedNodeMap`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NamedNodeMap)\n   23. [`Node`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node)\n   24. [`NodeIterator`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NodeIterator)\n   25. [`NodeList`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NodeList)\n   26. [`ProcessingInstruction`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ProcessingInstruction)\n   27. [`QuotaExceededError`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/QuotaExceededError)\n       Experimental\n   28. [`Range`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Range)\n   29. [`ShadowRoot`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ShadowRoot)\n   30. [`StaticRange`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/StaticRange)\n   31. [`Text`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Text)\n   32. [`TreeWalker`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/TreeWalker)\n   33. [`XMLDocument`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLDocument)\n   34. [`XPathEvaluator`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XPathEvaluator)\n   35. [`XPathExpression`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XPathExpression)\n   36. [`XPathResult`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XPathResult)\n   37. [`XSLTProcessor`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XSLTProcessor)\n8. Guides\n   \n   1. [Anatomy of the DOM](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Anatomy_of_the_DOM)\n   2. [Attribute reflection](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Reflected_attributes)\n   3. [Selection and traversal on the DOM tree](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Selection_and_traversal_on_the_DOM_tree)\n   4. [Building and updating the DOM tree](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Building_and_updating_the_DOM_tree)\n   5. [Working with events](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Events)\n\nYour blueprint for a better internet.\n\nMDN\n\n- [About](https:\/\/developer.mozilla.org\/en-US\/about)\n- [Blog](https:\/\/developer.mozilla.org\/en-US\/blog\/)\n- [Mozilla careers](https:\/\/www.mozilla.org\/en-US\/careers\/listings\/)\n- [Advertise with us](https:\/\/developer.mozilla.org\/en-US\/advertising)\n- [MDN Plus](https:\/\/developer.mozilla.org\/en-US\/plus)\n- [Product help](https:\/\/support.mozilla.org\/products\/mdn-plus)\n\nContribute\n\n- [MDN Community](https:\/\/developer.mozilla.org\/en-US\/community)\n- [Community resources](https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Community)\n- [Writing guidelines](https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Writing_guidelines)\n- [MDN Discord](https:\/\/developer.mozilla.org\/discord)\n- [MDN on GitHub](https:\/\/github.com\/mdn)\n\nDevelopers\n\n- [Web technologies](https:\/\/developer.mozilla.org\/en-US\/docs\/Web)\n- [Learn web development](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development)\n- [Guides](https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Guides)\n- [Tutorials](https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Tutorials)\n- [Glossary](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary)\n- [Hacks blog](https:\/\/hacks.mozilla.org\/)\n\n- [Website Privacy Notice](https:\/\/www.mozilla.org\/privacy\/websites\/)\n- [Telemetry Settings](https:\/\/www.mozilla.org\/en-US\/privacy\/websites\/data-preferences\/)\n- [Legal](https:\/\/www.mozilla.org\/about\/legal\/terms\/mozilla)\n- [Community Participation Guidelines](https:\/\/www.mozilla.org\/about\/governance\/policies\/participation\/)\n\nVisit [Mozilla Corporation’s](https:\/\/www.mozilla.org\/) not-for-profit parent, the [Mozilla Foundation](https:\/\/foundation.mozilla.org\/).  \n Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under [a Creative Commons license](https:\/\/developer.mozilla.org\/docs\/MDN\/Writing_guidelines\/Attrib_copyright_license).","attrs_readable_markdown":"Baseline  2024\n\nNewly available\n\nSince March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.\n\n- [Learn more](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Baseline\/Compatibility)\n- [See full compatibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#browser_compatibility)\n- [Report feedback](https:\/\/survey.alchemer.com\/s3\/7634825\/MDN-baseline-feedback?page=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&level=low)\n\nThe **`checkVisibility()`** method of the [`Element`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element) interface checks whether the element is visible.\n\nThe method returns `false` in either of the following situations:\n\n- The element doesn't have an associated box, for example because the CSS [`display`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display) property is set to [`none`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display#none) or [`contents`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/display#contents).\n- The element is not being rendered because the element or an ancestor element sets the [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property to [`hidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#hidden).\n\nThe optional parameter enables additional checks to test for other interpretations of what \"visible\" means. For example, you can further check whether an element has an opacity of `0`, if the value of the element [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property makes it invisible, or if the element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has a value of [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto) and its rendering is currently being skipped.\n\n## [Syntax](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#syntax)\njs\n```\ncheckVisibility(options)\n```\n\n### [Parameters](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#parameters)\n[`options` Optional](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#options)\n\nAn object indicating additional checks to run. The possible options are:\n\n[`contentVisibilityAuto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#contentvisibilityauto)\n\n`true` to check if the element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) the value [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto), and it is currently skipping its rendering. `false` by default.\n\n[`opacityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#opacityproperty)\n\n`true` to check if the element [`opacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/opacity) property has (or inherits) a value of `0`. `false` by default.\n\n[`visibilityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#visibilityproperty)\n\n`true` to check if the element is invisible due to the value of its [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property. `false` by default.\n\n[`checkOpacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#checkopacity)\n\nA historic alias for [`opacityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#opacityproperty).\n\n[`checkVisibilityCSS`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#checkvisibilitycss)\n\nA historic alias for [`visibilityProperty`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#visibilityproperty).\n\n### [Return value](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#return_value)\n`false` if any of the following conditions are met, otherwise `true`:\n\n- The element doesn't have an associated box.\n- The element [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) a value of [`hidden`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility#hidden).\n- `opacityProperty` (or `checkOpacity`) is `true` and the element [`opacity`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/opacity) property has (or inherits) a value of `0`.\n- `visibilityProperty` (or `checkVisibilityCSS`) is `true` and the element is invisible due to the value of its [`visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/visibility) property.\n- `contentVisibilityAuto` is `true`, the [`content-visibility`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility) property has (or inherits) a value of [`auto`](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/content-visibility#auto), and element rendering is being skipped.\n## [Examples](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#examples)\n### [Test checkVisibility() with varied CSS](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#test_checkvisibility_with_varied_css)\nThe following example allows you to test how the result of `checkVisibility()` might change with different values for `display`, `content-visibility`, `visibility`, and `opacity` CSS properties.\n\n#### HTML\nThe HTML defines a `<select>` element for the CSS properties that affect the results of `checkVisibility()`. The first (default selected) values should result in `checkVisibility()` returning `true` when applied to an element, while the other values affect the visibility.\n\nhtml\n```\n<select id=\"css_display\" name=\"css_display\">\n  <option value=\"block\" selected>display: block<\/option>\n  <option value=\"none\">display: none<\/option>\n  <option value=\"contents\">display: contents<\/option>\n<\/select>\n\n<select id=\"css_content_visibility\" name=\"css_content_visibility\">\n  <option value=\"visible\" selected>content-visibility: visible<\/option>\n  <option value=\"hidden\">content-visibility: hidden<\/option>\n  <option value=\"auto\">content-visibility: auto<\/option>\n<\/select>\n\n<select id=\"css_opacity\" name=\"css_opacity\">\n  <option value=\"1\" selected>opacity: 1<\/option>\n  <option value=\"0\">opacity: 0<\/option>\n<\/select>\n\n<select id=\"css_visibility\" name=\"css_visibility\">\n  <option value=\"visible\" selected>visibility: visible<\/option>\n  <option value=\"hidden\">visibility: hidden<\/option>\n  <option value=\"collapse\">visibility: collapse<\/option>\n<\/select>\n```\n\nNext we have a `<pre>` that is used to output the result of the `checkVisibility()` check when no options are passed in the parameter, and for each separate option value. At the end we have the element that will be tested (to which we will apply the selected CSS property values).\n\nhtml\n```\n<pre id=\"output_result\"><\/pre>\n<div id=\"test_element\">The element to be checked for visibility.<\/div>\n```\n#### CSS\nThe CSS just highlights the element to be tested.\n\ncss\n```\n#test_element {\n  border: solid;\n  border-color: blue;\n}\n```\n#### JavaScript\nThe code below gets each of the `<select>` elements. The `updateCSS()` method is called on start and whenever the select elements change in order to apply the selected CSS to the target element,\n\njs\n```\nconst displayCssSelect = document.getElementById(\"css_display\");\nconst contentVisibilityCssSelect = document.getElementById(\n  \"css_content_visibility\",\n);\nconst displayCssOpacity = document.getElementById(\"css_opacity\");\nconst displayCssVisibility = document.getElementById(\"css_visibility\");\n\nconst outputResult = document.getElementById(\"output_result\");\nconst elementToCheck = document.getElementById(\"test_element\");\n\nupdateCSS();\n\nconst cssSelectors = document.querySelectorAll(\"select\");\ncssSelectors.forEach((select) => {\n  select.addEventListener(\"change\", (event) => {\n    updateCSS();\n  });\n});\n\nfunction updateCSS() {\n  \/\/ Apply selected CSS properties to target element\n  elementToCheck.style.display = displayCssSelect.value;\n  elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;\n  elementToCheck.style.opacity = displayCssOpacity.value;\n  elementToCheck.style.visibility = displayCssVisibility.value;\n\n  \/\/ Call checkVisibility() on element using default and each of options\n  const defaultVisibilityCheck = elementToCheck.checkVisibility();\n  const opacityVisibilityCheck = elementToCheck.checkVisibility({\n    opacityProperty: true,\n  });\n  const cssVisibilityCheck = elementToCheck.checkVisibility({\n    visibilityProperty: true,\n  });\n  const contentVisibilityAutoCheck = elementToCheck.checkVisibility({\n    contentVisibilityAuto: true,\n  });\n\n  \/\/ Output the results of the tests\n  outputResult.innerText = `Checks on element below (may be hidden):\n- Result of checkVisibility(): ${defaultVisibilityCheck}\n- Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck}\n- Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck}\n- Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`;\n}\n```\n#### Result\nThe results are shown below. If you change the selection the results will be applied to the test element (blue outline) and the results of the `checkVisibility()` for each setting should be displayed. So for example, if you set the `opacity: 0` that test (only) should indicate `false`. However if you set `display: none` then all tests should return `false`.\n\n## [Specifications](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#specifications)\n| Specification |\n|---|\n| [CSSOM View Module \\# dom-element-checkvisibility](https:\/\/drafts.csswg.org\/cssom-view-1\/#dom-element-checkvisibility) |\n## [Browser compatibility](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/checkVisibility#browser_compatibility)","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

3 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.1 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
Last Crawled	2026-04-09 00:25:56 (3 days ago)
First Indexed	2023-04-17 05:24:51 (2 years ago)
HTTP Status Code	200
Meta Title	Element: checkVisibility() method - Web APIs \| MDN
Meta Description	The checkVisibility() method of the Element interface checks whether the element is visible.
Meta Canonical	null
Boilerpipe Text	Baseline 2024 Newly available Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. Learn more See full compatibility Report feedback The checkVisibility() method of the Element interface checks whether the element is visible. The method returns false in either of the following situations: The element doesn't have an associated box, for example because the CSS display property is set to none or contents . The element is not being rendered because the element or an ancestor element sets the content-visibility property to hidden . The optional parameter enables additional checks to test for other interpretations of what "visible" means. For example, you can further check whether an element has an opacity of 0 , if the value of the element visibility property makes it invisible, or if the element content-visibility property has a value of auto and its rendering is currently being skipped. Syntax js checkVisibility(options) Parameters options Optional An object indicating additional checks to run. The possible options are: contentVisibilityAuto true to check if the element content-visibility property has (or inherits) the value auto , and it is currently skipping its rendering. false by default. opacityProperty true to check if the element opacity property has (or inherits) a value of 0 . false by default. visibilityProperty true to check if the element is invisible due to the value of its visibility property. false by default. checkOpacity A historic alias for opacityProperty . checkVisibilityCSS A historic alias for visibilityProperty . Return value false if any of the following conditions are met, otherwise true : The element doesn't have an associated box. The element content-visibility property has (or inherits) a value of hidden . opacityProperty (or checkOpacity ) is true and the element opacity property has (or inherits) a value of 0 . visibilityProperty (or checkVisibilityCSS ) is true and the element is invisible due to the value of its visibility property. contentVisibilityAuto is true , the content-visibility property has (or inherits) a value of auto , and element rendering is being skipped. Examples Test checkVisibility() with varied CSS The following example allows you to test how the result of checkVisibility() might change with different values for display , content-visibility , visibility , and opacity CSS properties. HTML The HTML defines a <select> element for the CSS properties that affect the results of checkVisibility() . The first (default selected) values should result in checkVisibility() returning true when applied to an element, while the other values affect the visibility. html <select id="css_display" name="css_display"> <option value="block" selected>display: block</option> <option value="none">display: none</option> <option value="contents">display: contents</option> </select> <select id="css_content_visibility" name="css_content_visibility"> <option value="visible" selected>content-visibility: visible</option> <option value="hidden">content-visibility: hidden</option> <option value="auto">content-visibility: auto</option> </select> <select id="css_opacity" name="css_opacity"> <option value="1" selected>opacity: 1</option> <option value="0">opacity: 0</option> </select> <select id="css_visibility" name="css_visibility"> <option value="visible" selected>visibility: visible</option> <option value="hidden">visibility: hidden</option> <option value="collapse">visibility: collapse</option> </select> Next we have a <pre> that is used to output the result of the checkVisibility() check when no options are passed in the parameter, and for each separate option value. At the end we have the element that will be tested (to which we will apply the selected CSS property values). html <pre id="output_result"></pre> <div id="test_element">The element to be checked for visibility.</div> CSS The CSS just highlights the element to be tested. css #test_element { border: solid; border-color: blue; } JavaScript The code below gets each of the <select> elements. The updateCSS() method is called on start and whenever the select elements change in order to apply the selected CSS to the target element, js const displayCssSelect = document.getElementById("css_display"); const contentVisibilityCssSelect = document.getElementById( "css_content_visibility", ); const displayCssOpacity = document.getElementById("css_opacity"); const displayCssVisibility = document.getElementById("css_visibility"); const outputResult = document.getElementById("output_result"); const elementToCheck = document.getElementById("test_element"); updateCSS(); const cssSelectors = document.querySelectorAll("select"); cssSelectors.forEach((select) => { select.addEventListener("change", (event) => { updateCSS(); }); }); function updateCSS() { // Apply selected CSS properties to target element elementToCheck.style.display = displayCssSelect.value; elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value; elementToCheck.style.opacity = displayCssOpacity.value; elementToCheck.style.visibility = displayCssVisibility.value; // Call checkVisibility() on element using default and each of options const defaultVisibilityCheck = elementToCheck.checkVisibility(); const opacityVisibilityCheck = elementToCheck.checkVisibility({ opacityProperty: true, }); const cssVisibilityCheck = elementToCheck.checkVisibility({ visibilityProperty: true, }); const contentVisibilityAutoCheck = elementToCheck.checkVisibility({ contentVisibilityAuto: true, }); // Output the results of the tests outputResult.innerText = `Checks on element below (may be hidden): - Result of checkVisibility(): ${defaultVisibilityCheck} - Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck} - Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck} - Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`; } Result The results are shown below. If you change the selection the results will be applied to the test element (blue outline) and the results of the checkVisibility() for each setting should be displayed. So for example, if you set the opacity: 0 that test (only) should indicate false . However if you set display: none then all tests should return false . Specifications Specification CSSOM View Module # dom-element-checkvisibility Browser compatibility
Markdown	- [Skip to main content](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#content) - [Skip to search](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#search) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference - [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) - [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) - [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) - [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides - [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) - [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) - [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) - [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages - [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) - [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) - [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference - [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) - [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) - [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) - [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) - [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides - [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) - [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) - [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) - [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) - [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook - [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) - [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) - [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) - [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference - [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) - [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) - [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) - [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) - [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides - [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) - [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) - [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) - [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) - [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference - [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) - [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) - [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) - [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) - [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) - [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides") Web API guides - [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) - [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) - [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) - [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) All [All web technology](https://developer.mozilla.org/en-US/docs/Web) Technologies - [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) - [URI](https://developer.mozilla.org/en-US/docs/Web/URI) - [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) - [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) - [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) - [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references") Topics - [Media](https://developer.mozilla.org/en-US/docs/Web/Media) - [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) - [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy) - [Security](https://developer.mozilla.org/en-US/docs/Web/Security) - [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) Learn [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) Frontend developer course - [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) - [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) - [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) - [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar) Learn HTML - [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) Learn CSS - [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) - [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout) Learn JavaScript - [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) Tools Discover our tools - [Playground](https://developer.mozilla.org/en-US/play) - [HTTP Observatory](https://developer.mozilla.org/en-US/observatory) - [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator) - [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator) - [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator) - [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) - [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) - [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator) About Get to know MDN better - [About MDN](https://developer.mozilla.org/en-US/about) - [Advertise with us](https://developer.mozilla.org/en-US/advertising) - [Community](https://developer.mozilla.org/en-US/community) - [MDN on GitHub](https://github.com/mdn) [Blog](https://developer.mozilla.org/en-US/blog/) 1. [Web](https://developer.mozilla.org/en-US/docs/Web) 2. [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) 3. [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) 4. [checkVisibility()](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility) # Element: checkVisibility() method Baseline 2024 Newly available Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. - [Learn more](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) - [See full compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility) - [Report feedback](https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback?page=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&level=low) The `checkVisibility()` method of the [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface checks whether the element is visible. The method returns `false` in either of the following situations: - The element doesn't have an associated box, for example because the CSS [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) property is set to [`none`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#none) or [`contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#contents). - The element is not being rendered because the element or an ancestor element sets the [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property to [`hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden). The optional parameter enables additional checks to test for other interpretations of what "visible" means. For example, you can further check whether an element has an opacity of `0`, if the value of the element [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property makes it invisible, or if the element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has a value of [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto) and its rendering is currently being skipped. ## In this article - [Syntax](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#syntax) - [Examples](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#examples) - [Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#specifications) - [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility) ## [Syntax](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#syntax) js ``` checkVisibility(options) ``` ### [Parameters](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#parameters) [`options` Optional](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#options) An object indicating additional checks to run. The possible options are: [`contentVisibilityAuto`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#contentvisibilityauto) `true` to check if the element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) the value [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto), and it is currently skipping its rendering. `false` by default. [`opacityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#opacityproperty) `true` to check if the element [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity) property has (or inherits) a value of `0`. `false` by default. [`visibilityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#visibilityproperty) `true` to check if the element is invisible due to the value of its [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property. `false` by default. Note: Invisible elements include those that have [`visibility: hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden), and some element types that have [`visibility: collapse`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility#collapse). [`checkOpacity`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#checkopacity) A historic alias for [`opacityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#opacityproperty). [`checkVisibilityCSS`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#checkvisibilitycss) A historic alias for [`visibilityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#visibilityproperty). ### [Return value](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#return_value) `false` if any of the following conditions are met, otherwise `true`: - The element doesn't have an associated box. - The element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) a value of [`hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden). - `opacityProperty` (or `checkOpacity`) is `true` and the element [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity) property has (or inherits) a value of `0`. - `visibilityProperty` (or `checkVisibilityCSS`) is `true` and the element is invisible due to the value of its [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property. - `contentVisibilityAuto` is `true`, the [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) a value of [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto), and element rendering is being skipped. ## [Examples](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#examples) ### [Test checkVisibility() with varied CSS](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#test_checkvisibility_with_varied_css) The following example allows you to test how the result of `checkVisibility()` might change with different values for `display`, `content-visibility`, `visibility`, and `opacity` CSS properties. #### HTML The HTML defines a `<select>` element for the CSS properties that affect the results of `checkVisibility()`. The first (default selected) values should result in `checkVisibility()` returning `true` when applied to an element, while the other values affect the visibility. html ``` <select id="css_display" name="css_display"> <option value="block" selected>display: block</option> <option value="none">display: none</option> <option value="contents">display: contents</option> </select> <select id="css_content_visibility" name="css_content_visibility"> <option value="visible" selected>content-visibility: visible</option> <option value="hidden">content-visibility: hidden</option> <option value="auto">content-visibility: auto</option> </select> <select id="css_opacity" name="css_opacity"> <option value="1" selected>opacity: 1</option> <option value="0">opacity: 0</option> </select> <select id="css_visibility" name="css_visibility"> <option value="visible" selected>visibility: visible</option> <option value="hidden">visibility: hidden</option> <option value="collapse">visibility: collapse</option> </select> ``` Next we have a `<pre>` that is used to output the result of the `checkVisibility()` check when no options are passed in the parameter, and for each separate option value. At the end we have the element that will be tested (to which we will apply the selected CSS property values). html ``` <pre id="output_result"></pre> <div id="test_element">The element to be checked for visibility.</div> ``` #### CSS The CSS just highlights the element to be tested. css ``` #test_element { border: solid; border-color: blue; } ``` #### JavaScript The code below gets each of the `<select>` elements. The `updateCSS()` method is called on start and whenever the select elements change in order to apply the selected CSS to the target element, js ``` const displayCssSelect = document.getElementById("css_display"); const contentVisibilityCssSelect = document.getElementById( "css_content_visibility", ); const displayCssOpacity = document.getElementById("css_opacity"); const displayCssVisibility = document.getElementById("css_visibility"); const outputResult = document.getElementById("output_result"); const elementToCheck = document.getElementById("test_element"); updateCSS(); const cssSelectors = document.querySelectorAll("select"); cssSelectors.forEach((select) => { select.addEventListener("change", (event) => { updateCSS(); }); }); function updateCSS() { // Apply selected CSS properties to target element elementToCheck.style.display = displayCssSelect.value; elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value; elementToCheck.style.opacity = displayCssOpacity.value; elementToCheck.style.visibility = displayCssVisibility.value; // Call checkVisibility() on element using default and each of options const defaultVisibilityCheck = elementToCheck.checkVisibility(); const opacityVisibilityCheck = elementToCheck.checkVisibility({ opacityProperty: true, }); const cssVisibilityCheck = elementToCheck.checkVisibility({ visibilityProperty: true, }); const contentVisibilityAutoCheck = elementToCheck.checkVisibility({ contentVisibilityAuto: true, }); // Output the results of the tests outputResult.innerText = `Checks on element below (may be hidden): - Result of checkVisibility(): ${defaultVisibilityCheck} - Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck} - Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck} - Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`; } ``` #### Result The results are shown below. If you change the selection the results will be applied to the test element (blue outline) and the results of the `checkVisibility()` for each setting should be displayed. So for example, if you set the `opacity: 0` that test (only) should indicate `false`. However if you set `display: none` then all tests should return `false`. ## [Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#specifications) \| Specification \| \|---\| \| [CSSOM View Module \# dom-element-checkvisibility](https://drafts.csswg.org/cssom-view-1/#dom-element-checkvisibility) \| ## [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Dec 17, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/web/api/element/checkvisibility/index.md?plain=1 "Folder: en-us/web/api/element/checkvisibility (Opens in a new tab)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fapi%2Felement%2Fcheckvisibility%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Felement%2Fcheckvisibility%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F0c13af55e869cbc54830fd1a601fd05f60717375%0A+Document+last+modified%3A+2025-12-17T16%3A01%3A14.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 2. [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) 3. Instance properties 1. [`ariaActiveDescendantElement`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaActiveDescendantElement) 2. [`ariaAtomic`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAtomic) 3. [`ariaAutoComplete`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAutoComplete) 4. [`ariaBrailleLabel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleLabel) 5. [`ariaBrailleRoleDescription`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription) 6. [`ariaBusy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBusy) 7. [`ariaChecked`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked) 8. [`ariaColCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColCount) 9. [`ariaColIndex`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndex) 10. [`ariaColIndexText`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText) 11. [`ariaColSpan`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColSpan) 12. [`ariaControlsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements) 13. [`ariaCurrent`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent) 14. [`ariaDescribedByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements) 15. [`ariaDescription`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription) 16. [`ariaDetailsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDetailsElements) 17. [`ariaDisabled`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDisabled) 18. [`ariaErrorMessageElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaErrorMessageElements) 19. [`ariaExpanded`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded) 20. [`ariaFlowToElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaFlowToElements) 21. [`ariaHasPopup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup) 22. [`ariaHidden`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden) 23. [`ariaInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaInvalid) 24. [`ariaKeyShortcuts`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaKeyShortcuts) 25. [`ariaLabel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel) 26. [`ariaLabelledByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements) 27. [`ariaLevel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLevel) 28. [`ariaLive`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLive) 29. [`ariaModal`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaModal) 30. [`ariaMultiLine`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiLine) 31. [`ariaMultiSelectable`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiSelectable) 32. [`ariaOrientation`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOrientation) 33. [`ariaOwnsElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOwnsElements) 34. [`ariaPlaceholder`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPlaceholder) 35. [`ariaPosInSet`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPosInSet) 36. [`ariaPressed`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPressed) 37. [`ariaReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaReadOnly) 38. [`ariaRelevant`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant) Non-standard 39. [`ariaRequired`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRequired) 40. [`ariaRoleDescription`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRoleDescription) 41. [`ariaRowCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowCount) 42. [`ariaRowIndex`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndex) 43. [`ariaRowIndexText`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText) 44. [`ariaRowSpan`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowSpan) 45. [`ariaSelected`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSelected) 46. [`ariaSetSize`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSetSize) 47. [`ariaSort`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort) 48. [`ariaValueMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMax) 49. [`ariaValueMin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin) 50. [`ariaValueNow`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueNow) 51. [`ariaValueText`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueText) 52. [`assignedSlot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/assignedSlot) 53. [`attributes`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) 54. [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount) 55. [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children) 56. [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) 57. [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) 58. [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) 59. [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft) 60. [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop) 61. [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) 62. [`currentCSSZoom`](https://developer.mozilla.org/en-US/docs/Web/API/Element/currentCSSZoom) 63. [`customElementRegistry`](https://developer.mozilla.org/en-US/docs/Web/API/Element/customElementRegistry) 64. [`elementTiming`](https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming) Experimental 65. [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild) 66. [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) 67. [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 68. [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild) 69. [`localName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/localName) 70. [`namespaceURI`](https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI) 71. [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling) 72. [`outerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML) 73. [`part`](https://developer.mozilla.org/en-US/docs/Web/API/Element/part) 74. [`prefix`](https://developer.mozilla.org/en-US/docs/Web/API/Element/prefix) 75. [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling) 76. [`role`](https://developer.mozilla.org/en-US/docs/Web/API/Element/role) 77. [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) 78. [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft) 79. [`scrollLeftMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax) Non-standard 80. [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) 81. [`scrollTopMax`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax) Non-standard 82. [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) 83. [`shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot) 84. [`slot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/slot) 85. [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) 4. Instance methods 1. [`after()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/after) 2. [`animate()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) 3. [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) 4. [`ariaNotify()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaNotify) 5. [`attachShadow()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow) 6. [`before()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/before) 7. [`checkVisibility()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility)* 8. [`closest()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) 9. [`computedStyleMap()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap) 10. [`getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations) 11. [`getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute) 12. [`getAttributeNames()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames) 13. [`getAttributeNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNode) 14. [`getAttributeNodeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNodeNS) 15. [`getAttributeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNS) 16. [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 17. [`getClientRects()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects) 18. [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName) 19. [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) 20. [`getElementsByTagNameNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagNameNS) 21. [`getHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML) 22. [`hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute) 23. [`hasAttributeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributeNS) 24. [`hasAttributes()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes) 25. [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture) 26. [`insertAdjacentElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) 27. [`insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) 28. [`insertAdjacentText()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText) 29. [`matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) 30. [`moveBefore()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/moveBefore) 31. [`prepend()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend) 32. [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) 33. [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll) 34. [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture) 35. [`remove()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) 36. [`removeAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute) 37. [`removeAttributeNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttributeNode) 38. [`removeAttributeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttributeNS) 39. [`replaceChildren()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren) 40. [`replaceWith()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith) 41. [`requestFullscreen()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen) 42. [`requestPointerLock()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock) 43. [`scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll) 44. [`scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy) 45. [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) 46. [`scrollIntoViewIfNeeded()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) Non-standard 47. [`scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) 48. [`setAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) 49. [`setAttributeNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNode) 50. [`setAttributeNodeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNodeNS) 51. [`setAttributeNS()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS) 52. [`setCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setCapture) Non-standard Deprecated 53. [`setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 54. [`setHTMLUnsafe()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTMLUnsafe) 55. [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture) 56. [`toggleAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute) 5. Events 1. [`afterscriptexecute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/afterscriptexecute_event) Non-standard Deprecated 2. [`animationcancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) 3. [`animationend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) 4. [`animationiteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event) 5. [`animationstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event) 6. [`auxclick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event) 7. [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event) 8. [`beforematch`](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event) 9. [`beforescriptexecute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforescriptexecute_event) Non-standard Deprecated 10. [`beforexrselect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforexrselect_event) Experimental 11. [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) 12. [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) 13. [`compositionend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event) 14. [`compositionstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event) 15. [`compositionupdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event) 16. [`contentvisibilityautostatechange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event) 17. [`contextmenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) 18. [`copy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event) 19. [`cut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event) 20. [`dblclick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event) 21. [`DOMActivate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/DOMActivate_event) Deprecated 22. [`DOMMouseScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/DOMMouseScroll_event) Non-standard Deprecated 23. [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) 24. [`focusin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event) 25. [`focusout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event) 26. [`fullscreenchange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenchange_event) 27. [`fullscreenerror`](https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenerror_event) 28. [`gesturechange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturechange_event) Non-standard 29. [`gestureend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gestureend_event) Non-standard 30. [`gesturestart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event) Non-standard 31. [`gotpointercapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event) 32. [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) 33. [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) 34. [`keypress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event) Deprecated 35. [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event) 36. [`lostpointercapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event) 37. [`mousedown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event) 38. [`mouseenter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event) 39. [`mouseleave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event) 40. [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) 41. [`mouseout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event) 42. [`mouseover`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event) 43. [`mouseup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event) 44. [`mousewheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event) Non-standard Deprecated 45. [`MozMousePixelScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/MozMousePixelScroll_event) Non-standard Deprecated 46. [`paste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event) 47. [`pointercancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event) 48. [`pointerdown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event) 49. [`pointerenter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event) 50. [`pointerleave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event) 51. [`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event) 52. [`pointerout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) 53. [`pointerover`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerover_event) 54. [`pointerrawupdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerrawupdate_event) 55. [`pointerup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event) 56. [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event) 57. [`scrollend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) 58. [`scrollsnapchange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollsnapchange_event) Experimental 59. [`scrollsnapchanging`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollsnapchanging_event) Experimental 60. [`securitypolicyviolation`](https://developer.mozilla.org/en-US/docs/Web/API/Element/securitypolicyviolation_event) 61. [`touchcancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event) 62. [`touchend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event) 63. [`touchmove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event) 64. [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event) 65. [`transitioncancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event) 66. [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) 67. [`transitionrun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event) 68. [`transitionstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event) 69. [`webkitmouseforcechanged`](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcechanged_event) Non-standard 70. [`webkitmouseforcedown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcedown_event) Non-standard 71. [`webkitmouseforceup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforceup_event) Non-standard 72. [`webkitmouseforcewillbegin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event) Non-standard 73. [`wheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event) 6. Inheritance 1. [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node) 2. [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) 7. Related pages for DOM 1. [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) 2. [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) 3. [`AbstractRange`](https://developer.mozilla.org/en-US/docs/Web/API/AbstractRange) 4. [`Attr`](https://developer.mozilla.org/en-US/docs/Web/API/Attr) 5. [`CDATASection`](https://developer.mozilla.org/en-US/docs/Web/API/CDATASection) 6. [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData) 7. [`Comment`](https://developer.mozilla.org/en-US/docs/Web/API/Comment) 8. [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) 9. [`DOMError`](https://developer.mozilla.org/en-US/docs/Web/API/DOMError) Deprecated 10. [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) 11. [`DOMImplementation`](https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation) 12. [`DOMParser`](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) 13. [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) 14. [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/Document) 15. [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) 16. [`DocumentType`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentType) 17. [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) 18. [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) 19. [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) 20. [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) 21. [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) 22. [`NamedNodeMap`](https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap) 23. [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node) 24. [`NodeIterator`](https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator) 25. [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) 26. [`ProcessingInstruction`](https://developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction) 27. [`QuotaExceededError`](https://developer.mozilla.org/en-US/docs/Web/API/QuotaExceededError) Experimental 28. [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) 29. [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) 30. [`StaticRange`](https://developer.mozilla.org/en-US/docs/Web/API/StaticRange) 31. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) 32. [`TreeWalker`](https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker) 33. [`XMLDocument`](https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument) 34. [`XPathEvaluator`](https://developer.mozilla.org/en-US/docs/Web/API/XPathEvaluator) 35. [`XPathExpression`](https://developer.mozilla.org/en-US/docs/Web/API/XPathExpression) 36. [`XPathResult`](https://developer.mozilla.org/en-US/docs/Web/API/XPathResult) 37. [`XSLTProcessor`](https://developer.mozilla.org/en-US/docs/Web/API/XSLTProcessor) 8. Guides 1. [Anatomy of the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Anatomy_of_the_DOM) 2. [Attribute reflection](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Reflected_attributes) 3. [Selection and traversal on the DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Selection_and_traversal_on_the_DOM_tree) 4. [Building and updating the DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Building_and_updating_the_DOM_tree) 5. [Working with events](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) Your blueprint for a better internet. MDN - [About](https://developer.mozilla.org/en-US/about) - [Blog](https://developer.mozilla.org/en-US/blog/) - [Mozilla careers](https://www.mozilla.org/en-US/careers/listings/) - [Advertise with us](https://developer.mozilla.org/en-US/advertising) - [MDN Plus](https://developer.mozilla.org/en-US/plus) - [Product help](https://support.mozilla.org/products/mdn-plus) Contribute - [MDN Community](https://developer.mozilla.org/en-US/community) - [Community resources](https://developer.mozilla.org/en-US/docs/MDN/Community) - [Writing guidelines](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines) - [MDN Discord](https://developer.mozilla.org/discord) - [MDN on GitHub](https://github.com/mdn) Developers - [Web technologies](https://developer.mozilla.org/en-US/docs/Web) - [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) - [Guides](https://developer.mozilla.org/en-US/docs/MDN/Guides) - [Tutorials](https://developer.mozilla.org/en-US/docs/MDN/Tutorials) - [Glossary](https://developer.mozilla.org/en-US/docs/Glossary) - [Hacks blog](https://hacks.mozilla.org/) - [Website Privacy Notice](https://www.mozilla.org/privacy/websites/) - [Telemetry Settings](https://www.mozilla.org/en-US/privacy/websites/data-preferences/) - [Legal](https://www.mozilla.org/about/legal/terms/mozilla) - [Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/) Visit [Mozilla Corporation’s](https://www.mozilla.org/) not-for-profit parent, the [Mozilla Foundation](https://foundation.mozilla.org/). Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under [a Creative Commons license](https://developer.mozilla.org/docs/MDN/Writing_guidelines/Attrib_copyright_license).
Readable Markdown	Baseline 2024 Newly available Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. - [Learn more](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) - [See full compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility) - [Report feedback](https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback?page=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FcheckVisibility&level=low) The `checkVisibility()` method of the [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface checks whether the element is visible. The method returns `false` in either of the following situations: - The element doesn't have an associated box, for example because the CSS [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) property is set to [`none`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#none) or [`contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#contents). - The element is not being rendered because the element or an ancestor element sets the [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property to [`hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden). The optional parameter enables additional checks to test for other interpretations of what "visible" means. For example, you can further check whether an element has an opacity of `0`, if the value of the element [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property makes it invisible, or if the element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has a value of [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto) and its rendering is currently being skipped. ## [Syntax](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#syntax) js ``` checkVisibility(options) ``` ### [Parameters](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#parameters) [`options` Optional](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#options) An object indicating additional checks to run. The possible options are: [`contentVisibilityAuto`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#contentvisibilityauto) `true` to check if the element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) the value [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto), and it is currently skipping its rendering. `false` by default. [`opacityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#opacityproperty) `true` to check if the element [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity) property has (or inherits) a value of `0`. `false` by default. [`visibilityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#visibilityproperty) `true` to check if the element is invisible due to the value of its [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property. `false` by default. [`checkOpacity`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#checkopacity) A historic alias for [`opacityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#opacityproperty). [`checkVisibilityCSS`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#checkvisibilitycss) A historic alias for [`visibilityProperty`](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#visibilityproperty). ### [Return value](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#return_value) `false` if any of the following conditions are met, otherwise `true`: - The element doesn't have an associated box. - The element [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) a value of [`hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden). - `opacityProperty` (or `checkOpacity`) is `true` and the element [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity) property has (or inherits) a value of `0`. - `visibilityProperty` (or `checkVisibilityCSS`) is `true` and the element is invisible due to the value of its [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility) property. - `contentVisibilityAuto` is `true`, the [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) property has (or inherits) a value of [`auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility#auto), and element rendering is being skipped. ## [Examples](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#examples) ### [Test checkVisibility() with varied CSS](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#test_checkvisibility_with_varied_css) The following example allows you to test how the result of `checkVisibility()` might change with different values for `display`, `content-visibility`, `visibility`, and `opacity` CSS properties. #### HTML The HTML defines a `<select>` element for the CSS properties that affect the results of `checkVisibility()`. The first (default selected) values should result in `checkVisibility()` returning `true` when applied to an element, while the other values affect the visibility. html ``` <select id="css_display" name="css_display"> <option value="block" selected>display: block</option> <option value="none">display: none</option> <option value="contents">display: contents</option> </select> <select id="css_content_visibility" name="css_content_visibility"> <option value="visible" selected>content-visibility: visible</option> <option value="hidden">content-visibility: hidden</option> <option value="auto">content-visibility: auto</option> </select> <select id="css_opacity" name="css_opacity"> <option value="1" selected>opacity: 1</option> <option value="0">opacity: 0</option> </select> <select id="css_visibility" name="css_visibility"> <option value="visible" selected>visibility: visible</option> <option value="hidden">visibility: hidden</option> <option value="collapse">visibility: collapse</option> </select> ``` Next we have a `<pre>` that is used to output the result of the `checkVisibility()` check when no options are passed in the parameter, and for each separate option value. At the end we have the element that will be tested (to which we will apply the selected CSS property values). html ``` <pre id="output_result"></pre> <div id="test_element">The element to be checked for visibility.</div> ``` #### CSS The CSS just highlights the element to be tested. css ``` #test_element { border: solid; border-color: blue; } ``` #### JavaScript The code below gets each of the `<select>` elements. The `updateCSS()` method is called on start and whenever the select elements change in order to apply the selected CSS to the target element, js ``` const displayCssSelect = document.getElementById("css_display"); const contentVisibilityCssSelect = document.getElementById( "css_content_visibility", ); const displayCssOpacity = document.getElementById("css_opacity"); const displayCssVisibility = document.getElementById("css_visibility"); const outputResult = document.getElementById("output_result"); const elementToCheck = document.getElementById("test_element"); updateCSS(); const cssSelectors = document.querySelectorAll("select"); cssSelectors.forEach((select) => { select.addEventListener("change", (event) => { updateCSS(); }); }); function updateCSS() { // Apply selected CSS properties to target element elementToCheck.style.display = displayCssSelect.value; elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value; elementToCheck.style.opacity = displayCssOpacity.value; elementToCheck.style.visibility = displayCssVisibility.value; // Call checkVisibility() on element using default and each of options const defaultVisibilityCheck = elementToCheck.checkVisibility(); const opacityVisibilityCheck = elementToCheck.checkVisibility({ opacityProperty: true, }); const cssVisibilityCheck = elementToCheck.checkVisibility({ visibilityProperty: true, }); const contentVisibilityAutoCheck = elementToCheck.checkVisibility({ contentVisibilityAuto: true, }); // Output the results of the tests outputResult.innerText = `Checks on element below (may be hidden): - Result of checkVisibility(): ${defaultVisibilityCheck} - Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck} - Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck} - Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`; } ``` #### Result The results are shown below. If you change the selection the results will be applied to the test element (blue outline) and the results of the `checkVisibility()` for each setting should be displayed. So for example, if you set the `opacity: 0` that test (only) should indicate `false`. However if you set `display: none` then all tests should return `false`. ## [Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#specifications) \| Specification \| \|---\| \| [CSSOM View Module \# dom-element-checkvisibility](https://drafts.csswg.org/cssom-view-1/#dom-element-checkvisibility) \| ## [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility)
Shard	53 (laksa)
Root Hash	7082249407640205653
Unparsed URL	org,mozilla!developer,/en-US/docs/Web/API/Element/checkVisibility s443