2012-05-31 4 views
1

Я читаю элементы на странице (всех видов) с помощью JavaScript и, при необходимости, изменяя их. Когда я изменяю один из элементов, я хочу оставить маркер, чтобы сказать, что я его модифицировал. Затем я могу прочитать элементы на странице, и если я найду этот маркер, я знаю, что это один из элементов, которые я модифицировал и могу его восстановить. Вот код, который работает для меня, но это было предложено, я должен использовать SetAttribute и GetAttribute, а не то, что я делаю:Должен ли я использовать setAttribute для добавления свойств к элементу?

//hide some elements, after first leaving a marker and saving orig. val 
for(var i=0; i<elements.length; i++) { 
    if(should_i_hide_this_element(elements[i])) { //external logic unimportant 

     elements[i].wasModifiedByMe = true;    //mark element as modified 
     elements[i].origViz = elements[i].style.visibility; //save visibility val 
     elements[i].style.visibility = "hidden";   //and give it a new val 
    } 
} 

Соответствующий код для восстановления значений элементов, как это:

for(var i=0; i<elements.length; i++) { 
    if(elements[i].wasModifiedByMe) {     //This is one I modified 
     elements[i].style.visibility = elements[i].origViz; //restore original val 
     elements[i].wasModifiedByMe = false;   //mark as not modified now 
    } 
} 

Вопрос в том, должен ли я использовать setAttribute и getAttribute для моего beModifiedByMe boolean и моих свойств origViz? В настоящее время я не верю, что мне нужно использовать функции атрибута для моих собственных добавленных свойств.

После обсуждения нити ниже, я попробовал этот тест:

<!doctype html> 
<html> 
<body> 
<div id="mydiv">DIV</div> 
<script> 
var elem = document.getElementById("mydiv"); 
elem.secretproperty = "not_seen_in_elements_tab_in_chrome_dev_tools"; 
elem.setAttribute("publicproperty","is_visible_in_elements_tab"); 
</script> 
</body> 
</html> 

и на вкладке элементов в хром Дев инструментов, я увидел, что mydiv показывал, что атрибут, как общественная собственность части дел. Однако он не показывал секретную собственность.

Это как я и думал. Использование setAttribute устанавливает атрибут HTML, который также отражается в объекте javascript, но если НЕ использовать setAttribute и добавить свойство к объекту-хозяину javascript, отражение не идет другим путем (TO атрибутов HTML). Это то, чего я хочу. Я не хочу, чтобы каждый элемент, который я скрыл, неожиданно отображает атрибут isHiddenByMe = "true" (хотя в этом есть заслуга, я вижу это).

+1

Мой совет - использовать классы для этого и писать CSS на основе класса.Наличие класса говорит вам, было ли оно изменено вами. – kapa

+0

Хорошее предложение, но классы в этом случае не подходят. Мой код может быть добавлен на ЛЮБОЙ странице и скроет некоторые элементы при их запросе и восстановит их позже. – Dee2000

+1

Вы все еще можете использовать классы, но тогда вы можете сохранить 'style.visibility'. – kapa

ответ

2

Есть некоторые проблемы с настройкой ваших собственных свойств элементов DOM, покрытых this article on perfectionkills.com. Это говорит о расширении прототипов элементов DOM, но секции

имеют отношение к вам. Тем не менее, если вы знаете о проблемах, я думаю, что это нормально - это единственный способ сопоставить пользовательские объекты с элементами DOM.

Если вы можете использовать методы HTML5, вы также можете взглянуть на dataattributes. Для простых булевых маркеров они могут быть превосходным подходом.

+0

Спасибо. Я посмотрел ваши ссылки. Мне кажется, что теперь (после добавления моей маленькой тестовой страницы к моему оригинальному сообщению), что избежать setAttribute - это то, что я действительно хочу. Уклонение от столкновений было, безусловно, соображением, мои имена переменных гораздо более уникальны, чем в примере кода в исходном сообщении. К сожалению, нельзя использовать свойства HTML5. Все еще нужно поддерживать устаревшие браузеры. – Dee2000

+2

Если вы используете data- * attributes * с помощью метода setAttribute, поддерживающие его браузеры будут поддерживать его. Вы просто не сможете получить доступ к ним способом HTML5, с свойством [dataset] (https://developer.mozilla.org/en/DOM/element.dataset). – Bergi

+1

+1 атрибуты 'data-' могут использоваться в старых браузерах. Для этих браузеров это просто атрибуты HTML. – kapa

2

Для добавления атрибутов к элементам HTML, стандартом W3C является setAttribute. Вы не можете использовать его для element .style. property.

Однако установка атрибутов простым способом element. * attribute * все еще работает. Это просто не настоящий стандарт, поэтому лучше использовать setAttribute, но это зависит от ваших предпочтений.

+0

Я ошибаюсь, думая, что element.setAttribute («xyz», «XYZ») в div, будет показывать xyz = «XYZ» при просмотре этого элемента в инструментах браузера dev? Принимая во внимание, что element.xyz = "XYZ" НЕ покажет его, поскольку он не создал атрибут HTML, вместо этого он просто создал свойство элемента OBJECT. В этом случае это то, что я хочу, что это не правильный атрибут HTML. – Dee2000

+0

Подтверждено этим тестовым случаем. var elem = document.getElementById ("mydiv"); elem.hello = "мир"; elem.setAttribute ("рок", "ролл"); Я видел в инструменте chrome dev, что свойства div показали rock = "roll", но я никогда не видел hello = "world". Поэтому использование setAttribute определенно не то, что я хочу. Я думаю. – Dee2000

Смежные вопросы