List 요소 "value"속성

Question

CSS/Javascript로 만든 사용자 지정 스타일 드롭 다운 선택 상자가 있습니다.이 상자는 <select> 요소를 모방합니다. 상자는 표준 선택 상자의 <option> 요소를 반영하는 <li> 요소로 구성된 내부 목록이있는 <div>입니다.

표준 선택 <option> 요소에는 두 개의 중요한 구성 요소가 있습니다. 내부 텍스트 노드 (드롭 다운에서 실제로 화면에 표시되는 내용) 및 선택 항목의 값을 나타내는 문자열 value 양식 제출 또는 Javascript 사용).

내 사용자 정의 상자에서 <li> 요소의 텍스트 노드는 <option> 요소의 내부 텍스트 노드를 반영합니다. 그러나 "value"속성을 어떻게 미러링해야합니까? w3schools에 따르면 (가장 좋은 리소스는 아니지만), LI 요소는 사용할 수있는 "value"속성을 가지고 있지만 CSS 스타일링에 찬성하여 더 이상 사용되지 않습니다. 그러나 CSS 속성을 사용하여 목록 요소의 "가치"를 나타낼 수 있습니까? 아니면 LI 요소와 값을 연결하는 더 좋은 방법이 있습니까?

Answer 1

"데이터 -"현재 유효한 HTML입니다로 시작하는 속성을 속성을 사용해야합니다 STANDART. 따라서 다음과 같이 할 수 있습니다.

<ul> 
    <li data-value="1">Option #1</li> 
    <li data-value="754">Option #2</li> 
</ul> 

그런 식으로 나중에 각 옵션에 대한 가치에 쉽게 액세스 할 수 있습니다.

Answer 2

당신은 당신이 요소에 임의의 데이터를 저장해야하는 시간 속성 data-* HTML5 사용해야

:

이 상자는 내부 목록과 <div>입니다 :

<li data-value="something">Some text</li> 

---

사이드 노트 <li> 구성 요소

(또는 ol 또는 menu) 요소를 li 요소의 부모로 사용하시기 바랍니다.

Answer 3

"CSS 속성은 사용할 수 있습니다."HTML 속성 만 있으므로 CSS 속성이 없습니다.

모든 요소에 데이터를 저장하려면 data-*- 특성을 사용할 수 있습니다 (예 : <li data-value="some value">).

Answer 4

는 HTML5에 따르면 당신이 데이터 - *이

<li data-value="value">Text here</li>