1

написал скрипт для Tampermonkey который при наведении на элемент подсвечивает его и показывает его tagName, id, classList (как в дебаггере браузеров)

(function() {
    'use strict';
    var css = '.hglightblock { background-color:#ccf !important; }',
        head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    popuptooltip=document.createElement('div');
    popuptooltip.id="popuptooltip";
    popuptooltip.style.position="absolute";
    head.appendChild(style);
    document.getElementsByTagName('body')[0].appendChild(popuptooltip);
    style.type = 'text/css';
    if (style.styleSheet){
       // This is required for IE8 and below.
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }


    //var list=Array.prototype.slice.call(document.getElementsByTagName("*"));
    //document.getElementsByTagName("*")

    document.querySelectorAll("body *")
    .forEach(function(c){
        let tag=c.tagName;
        let cid=c.getAttribute("id")!=null?c.getAttribute("id"):"";
        let cl=c.className!=null&&c.className.length>0?c.className:"";

        c.addEventListener("mousemove",function(e){
            document.querySelector("#popuptooltip").innerHTML=tag+(cid!=""?"<b style='color:blue'>#"+cid+"</b>":"")+(cl!=""?"<b style='color:green'>."+cl+"</b>":"");
            document.querySelector("#popuptooltip").setAttribute("style", "padding:5px;position:absolute;top:"+(e.pageY+15)+"px;left:"+(e.pageX+15)+"px;border:1px solid black;background-color:white;");
            e.stopPropagation();
        })
        c.addEventListener("mouseover",function(e){
            c.classList.add("hglightblock")
            e.stopPropagation();
        })
        c.addEventListener("mouseout",function(e){
            c.classList.remove("hglightblock")
            e.stopPropagation();
        })
    })
})();

на многих сайтах работает нормально. но например на Stackoverflow не совсем: в блоке с кодом есть теги span.

<code class="">
<span class="pln"></span>
<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">app</span><span class="pun">.</span><span class="typ">Notification</span><span class="pun">;</span><span class="pln">
</code>

теги span внутри code не определяются скриптом.
для выборки всех тегов на странице использовал варианты:

var list=document.querySelectorAll("body *")
var list=Array.prototype.slice.call(document.getElementsByTagName("*"));
var list=document.getElementsByTagName("*");

результат одинаковый

UPD:

поменял (function(){ })() на window.onload=function(){...} - все работает

9
  • то есть, не работает только на тегах span, которые внутри тегов code? 7 мар 2020 в 17:05
  • @Август да. возможно и на других сайтах будет такое же поведение, то что под рукой было на том и потестил
    – axmed2004
    7 мар 2020 в 17:11
  • у меня Ваш скрипт работает (на span внутри code включительно). кстати, интересная вещь, буду пользоваться им, если Вы не против 7 мар 2020 в 17:23
  • @Август да пожалуйста. у вас какой браузер?
    – axmed2004
    7 мар 2020 в 18:01
  • 1
    @Август ну ладно, зачту )
    – axmed2004
    7 мар 2020 в 18:54

1 ответ 1

0

а теперь, отталкиваясь от дискуссии в комментариях, можно сделать вывод, что Ваш скрипт не работает в из-за того, что первоначально содержимое в тегах <code> на страницах этого сайта (StackOverflow) приходит как строка (это можно посмотреть через вкладку Network => Doc => входящий html файл), то есть внутри <code> еще нет сформированных <span> тегов. они создаются потом js скриптом.

решение проблемы:

document.addEventListener('load', вашаФункцияСКодом);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.