Определяемые пользователем атрибуты в элементах HTML? - PullRequest
Новая
       10

Определяемые пользователем атрибуты в элементах HTML?

5 голосов
/ 08 января 2010

Что мне нужно сделать, так это уметь хранить некоторые данные об элементе.

Например, допустим, у меня есть элемент списка , и я хочу сохранить некоторые данные о нем в элементе, например "Это элемент 1 из XYZ «.

Единственный способ, которым я знаю, как это сделать (чего я не хочу делать, если я могу избежать), заключается в следующем: 

<li id='item1'>
  Item 1
  <!--This is element 1 from XYZ-->
</li>

<script>
  // read it something like this
  var e = document.getElementById('item1').innerHTML; 
  // then parse out the comment, etc.
  // --
</script>

Что я действительно хочу, так это что-то вроде этого (что, я уверен, невозможно): 

// example
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>

.. конечно, я бы хотел как-то получить к нему доступ через javasscript.

В качестве альтернативы, есть ли другой способ добиться этого?

Спасибо -

Ответы [ 7 ]

13 голосов
/ 08 января 2010

Вы можете получить доступ к своему атрибуту userdata = "" из JavaScript. Просто сделай: 

var theData = document.getElementById('item1').getAttribute('userdata');

Если вы хотите сделать это способом HTML5, то вы бы использовали атрибуты с именем data- *, например ::

<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>

таким образом, он все равно будет действителен (т. Е. Вам станет легче, если вы не используете недопустимый атрибут). Новые браузеры будут поддерживать доступ к атрибутам data- * следующим образом: 

var theData = document.getElementById('item1').data.foo;

но я не думаю, что это реализовано достаточно широко, чтобы на него можно было положиться.

Если вы хотите сохранить данные в комментарии (хотя я бы посоветовал вместо этого использовать маршрут атрибута), вы можете сделать что-то вроде: 

var e = document.getElementById('item1');
var n = e.firstChild;
while (n && n.nodeType != Node.COMMENT_NODE) {
    n = n.nextSibling;
}
// now n.nodeValue will have the comment contents

(Нет гарантий о том, нравится ли IE что-либо из перечисленного.)

5 голосов
/ 08 января 2010

Вы не можете добавлять произвольные элементы в HTML. Ну, вы можете, но это не будет действительным и поведение не определено. Для такого рода вещей я склонен использовать jQuery. Он имеет вызов data(), который может добавлять произвольные данные к элементу. Я считаю, что это кодирует его в атрибуте класса, но реализация не важна.

Ты мог бы сделать это сам, но зачем? Легко ошибиться, введя неправильные символы, неправильно экранируя / не экранируя данные или неумышленно уничтожая информацию. Вместо этого просто сделайте: 

$("#item1").data({source: "Thsi is element 1 from XYZ"});
1 голос
/ 08 января 2010

Вы можете использовать функции setUserData () и getUserData () http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData

Например: 

<html>
<head>
    <script type="text/javascript">
        function set(){
            var a = document.getElementById("testElement");
            a.setUserData("testData", "Some text", null);
        }

        function get(){
            var a = document.getElementById("testElement");
            alert(a.getUserData("testData"));
        }
    </script>
</head>
<body>
    <span id="testElement"/>
    <form>
        <input type="button" value="setUserData" onclick="set()"/>
        <input type="button" value="getUserData" onclick="get()"/>
    </form>
</body>

1 голос
/ 08 января 2010

Поскольку вы можете принять добавление комментариев, лучшим решением будет добавить элемент span с требуемым содержимым. 

<span class="data">.....</span>

вы определяете, что ваш класс данных имеет display:none и он невидим ...

таким образом, вы можете получить к нему доступ обычными методами обхода DOM ..

0 голосов
/ 08 января 2010

// Если вы хотите включить данные в html, почему бы не дать ему свой собственный узел? 

.hiddendata{
 display: none
}

<li id= 'item1'> 
Item 1
<span class= "hiddendata"> This is element 1 from XYZ</span> 
</li> 

function readHiddenData(who){
 var A= [], n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   A[A.length]= n.textContent || n.innerText || '';
  }
  n= n.nextSibling;
 }
 return A;
}

function showHiddenData(who){
 var n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   n.style.display= "inline"
  }
  n= n.nextSibling;
 }
}
0 голосов
/ 08 января 2010

Вы можете добавить вложенный невидимый элемент с идентификатором и ваши данные в качестве innerText. Используйте атрибут style, чтобы убедиться, что он невидим.

Но все зависит от того, чего ты пытаешься достичь. Не могли бы вы рассказать подробнее?

0 голосов
/ 08 января 2010

Если вам не нужен HTML, чтобы он был действительным, вы можете создать любой атрибут, который вам нужен, и получить доступ к нему в Javascript, вызвав метод getAttribute.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...