javascript是网页文件中常用到的脚本语言，能够实现非常多的功能。那么怎么用javascript给不同的li设置不同属性呢？下面就随我一起进行实际操作吧。工具/原料more操作系统：win10专业版64位演示软件：edit plus5Edge浏览器方法/步骤1/7分步阅读

第一步：首先根据实际情况用网页制作软件打开或新建一个网页文档。这里我新建一个网页文档。

2/7

第二步：开始编写HTML代码进行页面的简单布局以实现相应的效果。比如写上有序列表代码。

div id= class=

ol div id=list

li这是第一个/li

li这是第二个/li

li这是第三个/li

li这是第四个/li

/ol

/div

3/7

第三步：此时为了方便做对比，先在浏览器中进行效果的预览。

4/7

第四步：编写javascript代码，首先获取ol标签下的li标签。

var t= document.getElementById(list);//首先获取ol元素列表

var a= t.getElementsByTagName(li);//获取ol元素下li标签

5/7

第五步：当获取到li标签后，就可以为每个li设置不同的样式。先给第一个li标签通过javascript设置属性。

a.style.cssText= color:#ff6699; font-size:20px;;//a就是获取第一个li标签

6/7

第六步：用同样的方法对其他li标签设置不同属性。a获取第二个、a获取第三个，以此类推。

var t= document.getElementById(list);//首先获取ol元素列表

var a= t.getElementsByTagName(li);//获取ol元素下li标签

a.style.cssText= color:#ff6699; font-size:20px;;//a就是获取第一个li标签

a.style.cssText= color:#6600ff; font-size:40px;;//a就是获取第二个li标签

a.style.cssText= color:#00cc33; font-size:60px;;//a就是获取第三个li标签

a.style.cssText= color:#ff0000; font-size:80px;;//a就是获取第四个li标签

7/7

总结：

1、首先编写布局标签，包括列表标签olli

2、接着编写javascript代码

3、先利用document方法获取列表标签ol

4、接着通过标签名称的方法获取li标签

5、列表标签中list就代表的是第一个li标签，其他以此类推

6、将获取到的li标签通过”style.cssText=方法为每个li设置不同的属性即可“

JS获取LI标签JS获取LI标签值JS改变LI属性