Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM UI 개체

<시간/>

HTML의 HTML DOM Ul 개체는

    을 나타냅니다. 요소.

      만들기 요소

      var ulObject = document.createElement(“UL”)

      여기, "ulObject" 다음 속성을 가질 수 있지만 HTML5에서는 지원되지 않습니다. -

      속성
      설명
      컴팩트
      순서가 없는 목록을 평소보다 작게 표시할지 여부를 설정/반환합니다.
      유형
      순서 없는 목록의 유형 속성 값을 설정/반환합니다.

      순서 없는 목록의 예를 살펴보겠습니다. 요소 -

      예시

      <!DOCTYPE html>
      <html>
      <head>
      <title>Ul item()</title>
      <style>
         form {
            width:70%;
            margin: 0 auto;
            text-align: center;
         }
         * {
            padding: 2px;
            margin:5px;
         }
         input[type="button"] {
            border-radius: 10px;
         }
         ul{
            width: 30%;
            margin: 0 auto;
         }
      </style>
      </head>
      <body>
         <form>
            <fieldset>
               <legend>item( )</legend>
               <h2>Menu</h2>
               <ul>
                  <li onclick="getOrder(0)">Mac & Cheese</li>
                  <li onclick="getOrder(1)">Pizza</li>
                  <li onclick="getOrder(2)">Burger</li>
               </ul>
               <div id="divDisplay">Click on menu item to order it</div>
            </fieldset>
         </form>
      <script>
         var divDisplay = document.getElementById("divDisplay");
         var menuSelect = document.getElementsByTagName("li");
         function getOrder(index) {
            divDisplay.textContent = 'Order: '+(menuSelect.item(index)).textContent;
         }
      </script>
      </body>
      </html>

      출력

      '

    • '를 클릭하기 전에 요소 -

      HTML DOM UI 개체

      '

    • '를 클릭한 후 요소 -

      HTML DOM UI 개체