{"id":12373,"date":"2024-03-14T15:42:23","date_gmt":"2024-03-14T15:42:23","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/"},"modified":"2025-08-05T00:44:27","modified_gmt":"2025-08-05T00:44:27","slug":"how-can-you-get-the-height-of-an-element-in-uniapp","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/","title":{"rendered":"Get Element Height in Uniapp: Complete Guide"},"content":{"rendered":"<p>In uniapp, you can use the uni.createSelectorQuery() method to obtain the height of an element.<\/p>\n<p>The code sample is as follows:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u5143\u7d20\u9ad8\u5ea6<\/span>\r\nuni.<span class=\"hljs-title function_\">createSelectorQuery<\/span>().<span class=\"hljs-title function_\">select<\/span>(<span class=\"hljs-string\">'.element-class'<\/span>).<span class=\"hljs-title function_\">boundingClientRect<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">rect<\/span>) {\r\n  <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'\u5143\u7d20\u9ad8\u5ea6\uff1a'<\/span>, rect.<span class=\"hljs-property\">height<\/span>);\r\n}).<span class=\"hljs-title function_\">exec<\/span>();\r\n<\/code><\/pre>\n<p>.element-class is the class name of the element whose height needs to be retrieved, and can be replaced with the corresponding selector as needed.<\/p>\n<p>You can use the boundingClientRect method to access the height of an element (rect.height) and perform further operations as needed.<\/p>\n<p>It is important to note that the method createSelectorQuery() returns a selector object, specifying the selector of an element through the select() method, then obtaining the height of the element through the boundingClientRect() method. Lastly, executing the selector query through the exec() method.<\/p>\n<p>Furthermore, the uni.createSelectorQuery() method is exclusive to uniapp and can only be used within uniapp, not compatible with other front-end frameworks or pure native development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In uniapp, you can use the uni.createSelectorQuery() method to obtain the height of an element. The code sample is as follows: \/\/ \u83b7\u53d6\u5143\u7d20\u9ad8\u5ea6 uni.createSelectorQuery().select(&#8216;.element-class&#8217;).boundingClientRect(function(rect) { console.log(&#8216;\u5143\u7d20\u9ad8\u5ea6\uff1a&#8217;, rect.height); }).exec(); .element-class is the class name of the element whose height needs to be retrieved, and can be replaced with the corresponding selector as needed. You can use [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[16186,16185,197,1873,16187],"class_list":["post-12373","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-createselectorquery","tag-element-height","tag-mobile-app-development","tag-uniapp","tag-uniapp-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Get Element Height in Uniapp: Complete Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Get Element Height in Uniapp: Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T15:42:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-05T00:44:27+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"Get Element Height in Uniapp: Complete Guide\",\"datePublished\":\"2024-03-14T15:42:23+00:00\",\"dateModified\":\"2025-08-05T00:44:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\"},\"wordCount\":143,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"createSelectorQuery\",\"Element height\",\"mobile app development\",\"Uniapp\",\"Uniapp development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\",\"name\":\"Get Element Height in Uniapp: Complete Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T15:42:23+00:00\",\"dateModified\":\"2025-08-05T00:44:27+00:00\",\"description\":\"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Get Element Height in Uniapp: Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Get Element Height in Uniapp: Complete Guide - Blog - Silicon Cloud","description":"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/","og_locale":"en_US","og_type":"article","og_title":"Get Element Height in Uniapp: Complete Guide","og_description":"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T15:42:23+00:00","article_modified_time":"2025-08-05T00:44:27+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"Get Element Height in Uniapp: Complete Guide","datePublished":"2024-03-14T15:42:23+00:00","dateModified":"2025-08-05T00:44:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/"},"wordCount":143,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["createSelectorQuery","Element height","mobile app development","Uniapp","Uniapp development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/","name":"Get Element Height in Uniapp: Complete Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T15:42:23+00:00","dateModified":"2025-08-05T00:44:27+00:00","description":"Learn how to get element height in Uniapp using uni.createSelectorQuery(). Step-by-step guide with code examples for precise UI measurements.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-get-the-height-of-an-element-in-uniapp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Get Element Height in Uniapp: Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=12373"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12373\/revisions"}],"predecessor-version":[{"id":156163,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12373\/revisions\/156163"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=12373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=12373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=12373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}