导航:首页 > 编程语言 > 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

友情链接