導航:首頁 > 編程語言 > js獲取每個li的高度

js獲取每個li的高度

 發布時間：2025-09-07 09:40:48

Ⅰ 本人js菜鳥，怎樣用js獲取ul裡面的li元素，用js寫，不用jq

var dv=document.getElementById("star"); 獲取id="star"的div
var ularr=dv.getElementsByTagName("ul"); 獲取div下的ul
var liarr=ularr[0].getElementsByTagName("li"); 獲取div下的ul下的li
liarr是個數組。

其實最簡單回方法是給ul一個id=「getli」；
然後答var liarr=document.getElementById("getli").getElementsByTagName("li");
liarr是個數組

Ⅱ JS如何獲取指定DIV下的子元素LI值

1、新建一個html文件，命名為test.html，用於講解JS如何獲取指定DIV下的子元素LI的值。

Ⅲ 求一段JS 獲取子元素自適應高度值並賦予其父元素相同的高度值

樓主請詳細說明，最好能貼出html和css 代碼，在線等！
因為沒有html代碼，自己寫了個基本符合樓主的需求，測試沒有太大問題，樓主只用更改下樣式就可以了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.tag{
position: relative;
width: 600px;
}

.tag li{
width: auto;
float: left;
text-align: center;
line-height: 30px;
background: #ccc;
height: 30px;
padding: 0px 20px 0px 20px;
margin:0px 10px 0px 10px;
}
.tag .show{
display: none;
top: 30px;
width: 250px;
height: auto;
overflow: hidden;
position: absolute;
background: #f00;
}
.tag .show dd{
width: auto;
float: left;
line-height: 30px;
background: #ccc;
height: 30px;
padding: 0px 20px 0px 20px;
margin:2px 10px 2px 10px;
}
</style>
</head>

<body>
<div class="tag" id="show">
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
<div class="show">
<dl>
<dd>第一個</dd>
<dd>第一</dd>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
</dl>
</div>
<div class="show">
<dl>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
<dd>第一個第二個</dd>
</dl>
</div>
<div class="show">
<dl>
<dd>第一個</dd>
<dd>第二個</dd>
<dd>lalalal</dd>
</dl>
</div>
</div>
<script type="text/javascript">
var show = document.getElementById('show'),
nav = show.getElementsByTagName('li'),
tag = show.getElementsByTagName('div');

for(var i = 0; i < nav.length; i++) {
nav[i].index = i;
nav[i].onmouseover = function () {
showTag(this.index);
}
nav[i].onmouseout = function () {
tag[this.index].style.display = 'none';
}
}

function getClass(dom, type) {
if (dom.currentStyle) {
return dom.currentStylep[type];
}
else {
return getComputedStyle(dom,false)[type];
}
}

function getLeftPos (index) {
if (index == 0) {
return 0;
}
else {
var count = 0;

for(var i = 0; i < index; i++) {
count += parseInt(getClass(nav[i], 'width'));
count += parseInt(getClass(nav[i], 'padding-left'));
count += parseInt(getClass(nav[i], 'padding-right'));
count += parseInt(getClass(nav[i], 'margin-left'));
count += parseInt(getClass(nav[i], 'margin-right'));
}

return count += (parseInt(getClass(nav[index], 'width')) + parseInt(getClass(nav[index], 'padding-left')) + parseInt(getClass(nav[index], 'margin-left')) + parseInt(getClass(nav[index], 'margin-right')) ) /2;
}
}

function showTag(index) {
// var nWidth = parseInt(getClass(nav[index], 'width')),
// nLeftPading = parseInt(getClass(nav[index], 'padding-left')),
// nRightPading = parseInt(getClass(nav[index], 'padding-right')),
// nLeftMargin = parseInt(getClass(nav[index], 'margin-left'));
var pos = getLeftPos(index),
twow = parseInt(getClass(tag[index], 'width')) / 2,
num = pos + twow;

tag[index].style.left = pos + 'px';
tag[index].style.display = 'block';
}
</script>
</body>
</html>

Ⅳ js中如何獲取一個id的值

只要使用getAttribute("id")函數即大腔可獲取li元素的id值，下面我們一起實例操作一下吧

  1. 首先我們在html當中創建li標簽

  2. 使用JS獲取li元素對象，getElementsByTagName("li")

3.接著我們列印出這樣的運行效果看一下：

4.使用JS獲取li元素的ID值跡芹即可，getAttribute("id")

5.下面我們一起來看下運行效果姿仿畢

Ⅳ js如何獲取點擊<li>標簽里的值

思路：為li對象添加單擊事件→事件觸發後利用innerHTML獲取li的文本。實例演示如下：

1、HTML結構內

<ulid="test">
	<li>Glen</li>
	<li>Tane</li>
	<li>John</li>
	<li>Ralph</li>
</ul>

2、javascript代碼

window.onload=function(){
	varobj_lis=document.getElementById("test").getElementsByTagName("li");
	for(i=0;i<obj_lis.length;i++){
		容obj_lis[i].onclick=function(){
			alert(this.innerHTML);
		}
	}
}

3、效果演示

閱讀全文

與js獲取每個li的高度相關的資料

熱點內容
網路計劃主要是通過時間參數計算 瀏覽：772
office教程網盤 瀏覽：331
送衣服用什麼app好 瀏覽：975
vivo需要什麼數據線 瀏覽：704
word二進制文件 瀏覽：77
微信小程序前端組件 瀏覽：622
台達編程pls在哪個位置 瀏覽：678
erlang程序設計中文版pdf 瀏覽：933
v3網路電話 瀏覽：21
凡什麼影視網站 瀏覽：365
qq名片只有字體圖片 瀏覽：890
紅米note3adb工具包 瀏覽：248
網路連接錯誤711是什麼意思 瀏覽：656
中國銀行app轉賬怎麼找電子回單 瀏覽：412
數控車工圖紙怎麼編程 瀏覽：880
如何在app買軟體 瀏覽：173
文件夾圖片怎麼顯示詳細 瀏覽：999
幫助文件不顯示圖片 瀏覽：41
sdcard文件夾在電腦哪裡 瀏覽：344
蘋果怎麼查看視頻文件 瀏覽：386

友情鏈接