javascript获取ul标签的id,如何才能改变ul内li的背景颜色等属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript获取ul标签的id,如何才能改变ul内li的背景颜色等属性相关的知识,希望对你有一定的参考价值。

如题,我写的代码是这样的,但是没效果,请高手帮忙看看,谢谢!!
window.onload=init;
function init()
var menu=document.getElementById("menu");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++)
//鼠标经过事件
lis[i].onmouseover = function ()
var ul = document.getElementById("menu");
var lis = ul.getElementsByTagName("li");
var li = lis[i];
if (li == this)
li.style.background = "red";



使用jquery的选择器获取ul里的所有li元素,然后用jquery提供的.css(name, value)方法修改所有li的css属性,即background-color

如果ul的id的变量名为ulid

$("li","#" + ulid).css("background-color","#ccc");

这个用到了jquery的选择器规则$(selector1, content)

selector1是一个选择器。content可以是一个选择器、一个jquery dom对象或者原生dom对象,上面的代码中conten是一个选择器

这个写法的意思是选择content中所有符合selector1的元素,在上面的代码里面就表示“选择id为ulid变量值的ul中所有的li元素”

.css(name, value)方法是改变名称为name的css属性为value,有数值单位的可以省去单位,如padding 30px的值可以直接写.css("padding", 30)

.css(name)是获取名称为name值的css属性值,如.css("padding")返回padding的值,不带单位,如.css("padding")返回30

参考技术A

用jquery写个给你行吗?jquery你自己下个~和这段代码放一起就行了

<script src="jquery.js"></script>
<script>
function changebackground(id)
if(id=='li1')
$('#'+id).css(background:"red");

if(id=='li2')
$('#'+id).css(background:"blue");

if(id=='li3')
$('#'+id).css(background:"yellow");

if(id=='li4')
$('#'+id).css(background:"green");

;
</script>
<body>
<div style="width:100px;height:400px" id="menu">
<li id="li1" style="width:100px;height:100px" onmouseover="changebackground(this.id)">1</li>
<li id="li2" style="width:100px;height:100px" onmouseover="changebackground(this.id)">2</li>
<li id="li3" style="width:100px;height:100px" onmouseover="changebackground(this.id)">3</li>
<li id="li4" style="width:100px;height:100px" onmouseover="changebackground(this.id)">4</li>
</div>
</body>

参考技术B 直接用css在li上面加上hover处理就可以,没必要用js
而且li == this这个是有问题,这个this对象用的并不正确。追问

用hover是处理超链接吧,可是我想改变背景颜色啊

追答

hover是CSS的鼠标伪事件

参考技术C 你不就想改变背景么,有什么难度么?直接给个id就可以了!
不会直接q我,244267510本回答被提问者采纳

如何用ul li 标签动态获取数据库中10条数据并有连接 麻烦详细点

datalist数据绑定,把标签加进<ItemTemplate>可以实现 参考技术A <ul>
<li><a href="链接地址?id=内容的id">数据库内容标题</a></li>
</ul>

利用程序循环输出li节点

以上是关于javascript获取ul标签的id,如何才能改变ul内li的背景颜色等属性的主要内容,如果未能解决你的问题,请参考以下文章

<ul>标签两层嵌套如何在js中找到第二层<li>标签,不用获取id的方法。两层<li>标签的class是一样的。

JavaScript学习--DOM基础

html如何获取标签包含的值,不是value?

JavaScript之属性操作及小例子

如何用ul li 标签动态获取数据库中10条数据并有连接 麻烦详细点

怎么通过javascript动态给<ul>里面的<li>里面添加<a>标签