2016-11-08 2 views
0

Итак, я склонен писать свои документы в уценке, и недавно я обнаружил, что могу создавать сокращения в уценке. Это здорово, но я уже создал свою собственную версию аббревиатурного тега, так как мне не понравилось, как выглядит стандартный тег при визуализации. Есть ли передовая практика для переопределения существующих тегов?Можно ли переопределить существующие теги html?

Текст, приведенный ниже, объясняет, к чему я стремлюсь достичь в эквивалентности. Я не могу изменить парсер разметки самостоятельно, поскольку я размещаю свой сайт на страницах Github. Для тех, кто хочет знать, как у меня есть собственный тег HTML, я использую Polymer для создания этих тегов.


Markdown Текст:

Markdown converts text to HTML. 

*[HTML]: HyperText Markup Language 

Старинный Код:

<p>Markdown converts text to <abbr title="HyperText Markup Language">HTML</abbr>.</p> 


Я хочу, чтобы она преобразуется в:

<p>Markdown converts text to <short-text abbr="HTML">HyperText Markup Language</short-text>.</p> 
+0

Вы можете использовать JavaScript. В частности, вы можете использовать библиотеку jQuery и вызвать функцию document.Ready для управления DOM. –

+4

Считаете ли вы использование CSS, чтобы он выглядел так, как вы хотите? –

+0

@NiettheDarkAbsol У меня в прошлом, когда я создал тег, однако я [теряю много контроля над тем, как работают теги) (https://stackoverflow.com/questions/1682714/can-an-abbr-tags- титульный быть стиль). – SenorContento

ответ

0

Если это простой текст, и вы делаете это со всеми вкладками abbr, вы можете просто создать новый элемент и заменить старый.

С JQuery (для простоты):

jQuery("abbr").each(function() { 
    var title = jQuery(this).attr("title"); 
    var text = jQuery(this).text(); 
    var $new = jQuery("<short-text></short-text>").attr("abbr", text).html(title); 
    jQuery(this).replaceWith($new); 
}); 
0

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

document.querySelectorAll('abbr').forEach(function(el) { 
    var newEl = document.createElement('shortText'); 
    newEl.setAttribute('abbr', el.innerHTML); 
    newEl.innerHTML = el.getAttribute('title'); 
    el.parentNode.replaceChild(newEl, el); 
}); 
Смежные вопросы