javascript operates on the li method in ul

2020-06-12 08:32:39
OfStack

This article gives an example of how javascript operates li in ul. Share to everybody for everybody reference. The details are as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Dynamic control li The team list </title>
<script type="text/javascript">
function iniEvent() {
 var ul = document.getElementById("football");
 var lis = ul.getElementsByTagName("li");
 for (var i = 0; i < lis.length; i++) {
  // Mouse-over event 
  lis[i].onmouseover = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.background = "red";
    }
    else {
     li.style.background = "gray";
    }
   }
  }
  // Mouse-click event 
  lis[i].onclick = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.fontSize = 30;
    }
    else {
     li.style.fontSize = 16;
    }
   }
  }
 }
}
</script>
</head>
<body onload="iniEvent()">
<!-- Functional specifications 
1. The lines that the mouse has moved over turn red 
2. Click on the line to make the font larger 
-->
<ul style="width:200px" id="football">
<li> Real Madrid </li>
<li> Manchester united </li>
<li> Chelsea </li>
<li> Barcelona </li>
<li>Ac milan </li>
<li> Inter milan </li>
</ul>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.