Style top 属性

جدول زمانی

دستورالعمل‌های مرجع JS

JavaScript

Window

DOM HTML

Web API

HTML کائنات

</a></li> <li><a href="/ur/jsref/dom_obj_time.html" title="HTML DOM Time اُبجیکٹ"><time></a></li> <li><a href="/ur/jsref/dom_obj_title.html" title="HTML DOM Title اُبجیکٹ"><title></a></li> <li><a href="/ur/jsref/dom_obj_track.html" title="HTML DOM Track اُبجیکٹ"><track></a></li> <li><a href="/ur/jsref/dom_obj_u.html" title="HTML DOM Underline اُبجیکٹ"><u></a></li> <li><a href="/ur/jsref/dom_obj_ul.html" title="HTML DOM Ul اُبجیکٹ"><ul></a></li> <li><a href="/ur/jsref/dom_obj_var.html" title="HTML DOM Variable اُبجیکٹ"><var></a></li> <li><a href="/ur/jsref/dom_obj_video.html" title="HTML DOM Video اُبجیکٹ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/ur/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration اُبجیکٹ">CSSStyleDeclaration</a></li> <li><a href="/ur/jsref/jsref_type_conversion.html" title="JavaScript کی نوع تبدیلی">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ur/howto/index.html" title="CodeW3C.com کا باندل">CodeW3C.com کا باندل</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Style top 属性</h1> <div class="prenextnav-ref"> <ul> <li> پچھلے صفحے کو دیکھئے <a href="/ur/jsref/prop_style_texttransform.html" title="Style textTransform نمائش">textTransform</a></li> <li> پائیدھا صفحہ <a href="/ur/jsref/prop_style_transform.html" title="Style transform نمائش">تغییر</a></li> <li> ایک سطر اوپر واپس <a href="/ur/jsref/dom_obj_style.html" title="ایچ تی ایم ال DOM اسٹائل آوبجیکٹ">ایچ تی ایم ال DOM اسٹائل آوبجیکٹ</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>top</code> 属性设置或返回定位元素的顶部位置。</p> <p>该属性规定元素的顶部位置，包括内边距、滚动条、边框和外边距。</p> <p class="tip"><span>提示：</span>定位元素是 <a href="/ur/jsref/prop_style_position.html" title="Style position نمائش">position 属性</a> 设置为：<code>relative</code>、<code>absolute</code> 或 <code>fixed</code>。</p> <p class="tip"><span>提示：</span>如需设置或返回定位元素的底部位置，请使用 <a href="/ur/jsref/prop_style_bottom.html" title="Style bottom نمائش">bottom 属性</a>。</p> <h3>另请参阅：</h3> <p>CSS 教程：<a href="/ur/css/css_positioning.html" title="CSS کی نیت">CSS کی نیت</a></p> <p>CSS 参考手册：<a href="/ur/cssref/pr_pos_top.html" title="CSS top نمائش">top 属性</a></p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>设置 <button> 元素的顶部位置：</p> <pre class="language-js"> document.getElementById("myBtn").style.top = "100px"; </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=jsck_style_top_1">亲自试一试</a></p> <h3>例子 2</h3> <p>使用负值 - 设置 <div> 元素的顶部位置：</p> <pre class="language-js"> document.getElementById("myDiv").style.top = "-100px"; </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=jsck_style_top_2">亲自试一试</a></p> <h3>例子 3</h3> <p>返回 <div> 元素的顶部位置：</p> <pre class="language-js"> alert(document.getElementById("myDiv").style.top); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=jsck_style_top_3">亲自试一试</a></p> </div> <div> <h2>语法</h2> <p>返回 top 属性：</p> <pre><i>object</i>.style.top</pre> <p>设置 top 属性：</p> <pre><i>object</i>.style.top = "auto|<i>length</i>|<i>%</i>|initial|inherit"</pre> <h3>属性值</h3> <table class="dataintable"> <tr> <th style="width: 25%;">值</th> <th>描述</th> </tr> <tr> <td>auto</td> <td>让浏览器设置顶部位置。默认。</td> </tr> <tr> <td><i>length</i></td> <td>以长度单位定义顶部位置。允许负值。</td> </tr> <tr> <td><i>%</i></td> <td>以父元素高度的百分比设置顶部位置。</td> </tr> <tr> <td>initial</td> <td>将此属性设置为其默认值。请参阅 <a href="/ur/cssref/css_initial.html" title="CSS initial کلیدی الفاظ">initial</a>。</td> </tr> <tr> <td>inherit</td> <td>اس کی واپسی کا اطلاق اس کی مادری عنصر پر ہوتا ہے۔ وضاحت کے لئے دیکھیئے <a href="/ur/cssref/css_inherit.html" title="CSS inherit کلیدی الفاظ">inherit</a>。</td> </tr> </table> </div> <div> <h2>تکنیکی تفصیلات</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">مقصد:</th> <td>خالی</td> </tr> <tr> <th>بائیکدھار:</th> <td>نصب، جو پوزیشن کی جگہ کی اشارت دیتا ہے。</td> </tr> <tr> <th>سی ایس ایس ورژن:</th> <td>سی ایس ایس2</td> </tr> </table> </div> <div> <h2>بھرائی جانے والا مرورگر</h2> <table class="browser-support"> <tr> <th class="bsChrome">چروم</th> <th class="bsEdge">ایج</th> <th class="bsFirefox">فائرفاکس</th> <th class="bsSafari">سافری</th> <th class="bsOpera">اوپرا</th> </tr> <tr> <td>چروم</td> <td>ایج</td> <td>فائرفاکس</td> <td>سافری</td> <td>اوپرا</td> </tr> <tr> <td>پشتیبندگی</td> <td>پشتیبندگی</td> <td>پشتیبندگی</td> <td>پشتیبندگی</td> <td>پشتیبندگی</td> </tr> </table> </div> <div class="prenextnav-ref"> <ul> <li> پچھلے صفحے کو دیکھئے <a href="/ur/jsref/prop_style_texttransform.html" title="Style textTransform نمائش">textTransform</a></li> <li> پائیدھا صفحہ <a href="/ur/jsref/prop_style_transform.html" title="Style transform نمائش">تغییر</a></li> <li> ایک سطر اوپر واپس <a href="/ur/jsref/dom_obj_style.html" title="ایچ تی ایم ال DOM اسٹائل آوبجیکٹ">ایچ تی ایم ال DOM اسٹائل آوبجیکٹ</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> توجیہ گاہ </center><h3> <h5 id="tools_reference"><a href="/ur/jsref/index.html">جاوا اسکریپت اور ایچ تی ایم ال DOM مراجع</a></h5> <h5 id="tools_example"><a href="/ur/js/js_examples.html">JavaScript مثال</a></h5> <h5 id="tools_quiz"><a href="/ur/js/js_quiz.html">JavaScript کا امتحان</a></h5> <h5 id="tools_tutorial"><a href="/ur/js/index.html">JavaScript تعلیم</a></h5> </div> <div><h3><center> سپانسر لنک </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> کودو وائی سی کی سروسیز محض تربیت اور ٹیسٹ کے لئے فراہم کی گئی ہیں، صحت کی تضمین نہیں کی جاتی ہے۔ اس سائٹ کی سروسیز کا استعمال سے پیدا ہونے والا خطرہ اس سائٹ سے منسلک نہیں ہوتا۔ تمام حقوق محفوظ، تمام حقوق رکھے گئے ہیں。 </p> <p id="p2"> <a href="/ur/about/index.html" title="کودو وائی سی کے بارے میں">کودو وائی سی کے بارے میں</a> <a href="/ur/about/about_helping.html" title="کودو وائی سی کی مدد">کودو وائی سی کی مدد</a> <a href="/ur/about/about_use.html" title="کا استعمال کے بارے میں">استعمال شرائط</a> <a href="/ur/about/about_privacy.html" title="پریویسی کے بارے میں">پریویسی شرائط</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="پاورڈ بے سی 4 ای ای"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>