如何使用 JavaScript 设置元素的顶部位置?
在本教程中，我们将学习使用 JavaScript 设置元素的顶部位置。要设置元素的顶部位置，我们可以使用 JavaScript 中的 DOM Style top 属性。或者，我们可以使用 DOM Style setProperty() 方法。让我们简要讨论一下我们的主题。
使用 Style top 属性
我们可以使用 JavaScript DOM style top 属性设置或返回元素的顶部位置。
以下是使用带有点符号或方括号的 Style top 属性设置元素顶部位置的语法。
语法
object.style.top = "auto | length | % | initial | inherit"; object.style["top"] = "auto | length | % | initial | inherit";
使用此语法，我们可以将元素所需的顶部位置设置为元素的样式。
参数
- auto − 允许浏览器设置顶部位置。
- length − 以长度单位设置顶部位置。接受负值。
- % − 以父元素高度的百分比设置顶部位置。
- initial − 将此属性设置为其默认值。
- inherit − 从其父元素继承此属性。
该属性的默认值为 auto。返回值是一个表示元素顶部位置的字符串。
示例 1
您可以尝试运行以下代码，使用 JavaScript 设置 div 的顶部位置 −
<!DOCTYPE html> <html> <head> <style> #myID { position: absolute; } </style> </head> <body> <button onclick="display()">Set Top Position</button> <div id="myID"> This is demo text! This is demo text! </div> <script> function display() { document.getElementById("myID").style.top="100px"; } </script> </body> </html>
示例 2
在此程序中，我们设置元素的顶部位置。用户从下拉列表中选择所需的顶部位置值。
当用户勾选按钮时，我们调用函数按照上面给出的语法设置元素的顶部位置。
此处，元素的位置是绝对的。如果用户选择继承，则父元素的顶部值将设置为我们的元素。
<!DOCTYPE html> <head> <style> #topPosUsrParent{ top: 400px; } #topPosUsrEl{ position: absolute; background-color: #AFEEEE; } </style> </head> <body> <h3> Set the top position of an element using the<i> top </i>property. </h3> <div id="topPosUsrParent"> <div id="topPosUsrEl"> Set the Top Position of this DIV <br> This is Demo Text</div> </div> <br> <br> <br> <div id="topPosUsrBtnWrap"> <select id="topPosUsrSel"> <option selected="selected"/> auto <option/> 300px <option/> -1px <option/> 50% <option/> initial <option/> inherit </select> <br> <p> Select a top position and click on the button. </p> <button onclick="setTop();"> Apply </button> </div> <br> </body> <script> function setTop(){ var topPosUsrSelTag=document.getElementById("topPosUsrSel"); var topPosUsrSelIndx=topPosUsrSelTag.selectedIndex; var topPosUsrSelStat=topPosUsrSelTag.options[topPosUsrSelIndx].text; var topPosUsrEl=document.getElementById("topPosUsrEl"); topPosUsrEl.style.top=topPosUsrSelStat; } </script> </html>
使用 Style setProperty() 方法
使用此方法，我们可以通过指定属性名称和值来设置元素的顶部位置。
如果元素中存在该属性，则该属性将替换其值。否则，它将创建一个新属性并设置一个值。
用户可以按照以下语法使用此方法。
语法
object.style.setProperty(propName, propValue, propPriority);
使用此语法，我们可以将元素所需的属性和值设置为元素的样式。
参数
- propName − 属性名称。这里是 top。该值可以是不区分大小写的字符串。
- propValue − 属性值。
- propPriority − 属性的优先级。例如，getPropertyPriority("top") 将返回其优先级。我们也可以设置为 null。如果最初将属性设置为 !important，并且稍后如果需要，我们可以使用此优先级参数进行覆盖。
setProperty() 方法不返回任何值。
示例 3
在此程序中，我们还通过获取用户的输入来设置绝对定位元素的 top 值。
此程序的不同之处在于，我们使用 setProperty 方法的优先级选项用 feature important 覆盖 top 值。
<html> <head> <style> #topPosSetAttrParent{ top: 300px; } #topPosSetAttrEl{ position: absolute; background-color: #BDB76B; top: auto !important; left: 20px; } </style> </head> <body> <h3>Set the top position of an element using the<i> setProperty() </i>method. </h3> <div id="topPosSetAttrParent"> <div id="topPosSetAttrEl"> This is Demo Text <br /> To set the top of this element select the position and click on the "Apply" button below.</div> </div> <br> <br> <div id="topPosSetAttrBtnWrap"> <select id="topPosSetAttrSel"> <option selected="selected"/>auto <option/> 200px <option/> -1px <option/> 5% <option/> initial <option/> inherit </select> <br> <p>Select a top position to set the current top value</p> <button onclick="setTopPosition();"> Apply </button> </div> <br> </body> <script> function setTopPosition(){ var topPosSetAttrSelTag=document.getElementById("topPosSetAttrSel"); var topPosSetAttrSelIndx=topPosSetAttrSelTag.selectedIndex; var topPosSetAttrSelStat=topPosSetAttrSelTag.options[topPosSetAttrSelIndx].text; var topPosSetAttrBtnWrap=document.getElementById("topPosSetAttrBtnWrap"); var topPosSetAttrEl=document.getElementById("topPosSetAttrEl"); topPosSetAttrEl.style.setProperty("top",topPosSetAttrSelStat, "important"); } </script> </html>
本教程回顾了在 JavaScript 中设置 top 属性的方法。
我们可以使用点运算符或方括号轻松地将 top 属性设置为绝对元素。
另一种方法 setProperty() 可帮助我们设置或重置 top 值。用户可以根据需要选择任何方法。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
