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 that you have read and understand our privacy policy and code of conduct.

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