Question

我有一个javascript书签，我把它放在一起，使一个艰巨的任务更可忍受。基本上我正在浏览数百页的培训材料，并确保所有这些材料都已从Helvetica正确地换成Arial。小书签代码如下所示，但快速细分是它创建了一个mousemove事件监听器和一个小的，绝对定位的div。在mousemove事件中，div移动到新的鼠标位置（向下和向右偏移10px），使用elementFromPoint获取鼠标下的元素，并显示该元素的font-family属性。哦，它根据Arial是否出现在属性中来改变它的背景颜色。

var bodyEl=document.getElementsByTagName("body")[0];
var displayDiv=document.createElement("div");
displayDiv.style.position="absolute";
displayDiv.style.top="0px";
displayDiv.style.top="0px";
bodyEl.appendChild(displayDiv);


function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}
function getTheElement(x,y) {return document.elementFromPoint(x,y);}

fn_displayFont=function displayFont(e) {
    e = e || window.event;
    var divX=e.pageX+10;
    var divY=e.pageY+10;
    var font=getStyle(getTheElement(e.pageX,e.pageY),"font-family");
    if (font.toLowerCase().indexOf("arial") != -1) {
        displayDiv.style.backgroundColor = "green";
    } else {
        displayDiv.style.backgroundColor = "red";
    }
    displayDiv.style.top= divY.toString() + "px";
    displayDiv.style.left= divX.toString() + "px";
    displayDiv.style.fontFamily=font;
    displayDiv.innerHTML=font;
}

window.addEventListener('mousemove', fn_displayFont);
document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        window.removeEventListener('mousemove', fn_displayFont);
        bodyEl.removeChild(displayDiv);
    }
};

（为了记录，我在SO上偷了答案的风格确定代码，但是我不久之后丢失了标签。谢谢，匿名的互联网家伙！）所以这一切都很有效 - 直到我尝试将鼠标悬停在从顶部向下滚动的页面的一部分上。如果我将鼠标放在屏幕的最底部，同时滚动到页面的顶部，则div位于可能的位置。如果我向下滚动足够远，则firebug开始记录e.pageX未定义。

有什么想法吗？

Answer 1

好吧，然后想通了。我看到http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/276742/elementfrompoint-problems-when-window-has-been-scrolled-并且认为这意味着我必须在离开e.pageX / Y值之前减去页面偏移，在我用它来计算div位置或其他任何东西之前，这只是打破了我的一切所以我假设它一定是无关的 - 不是这样！从我现在的理解，elementFromPoint方法在浏览器的当前视图中采用相对点，也就是说，基于当前可以看到的内容的左上角，而不是整个页面。我通过在获取元素时从X和Y值中获取偏移来修复它。现在正在运行的代码如下。

var bodyEl=document.getElementsByTagName("body")[0];
var displayDiv=document.createElement("div");
displayDiv.style.position="absolute";
displayDiv.style.top="0px";
displayDiv.style.top="0px";
bodyEl.appendChild(displayDiv);


function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}
function getTheElement(x,y) {return document.elementFromPoint(x,y);}

fn_displayFont=function displayFont(e) {
    e = e || window.event;
    var divX=e.pageX + 10;
    var divY=e.pageY + 10;
    var font=getStyle(getTheElement(e.pageX - window.pageXOffset,e.pageY - window.pageYOffset),"font-family");
    if (font.toLowerCase().indexOf("arial") != -1) {
        displayDiv.style.backgroundColor = "green";
    } else {
        displayDiv.style.backgroundColor = "red";
    }
    displayDiv.style.top= divY.toString() + "px";
    displayDiv.style.left= divX.toString() + "px";
    displayDiv.style.fontFamily=font;
    displayDiv.innerHTML=font;
}

document.addEventListener('mousemove', fn_displayFont);
document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        window.removeEventListener('mousemove', fn_displayFont);
        bodyEl.removeChild(displayDiv);
    }
};

Answer 2

嗯，而不是用鼠标检查，为什么不检查每个叶子节点？如果任何叶节点具有arial的font-family，那么它应该表明它的一个祖先有一个Arial字体系列。

首先，您需要将jquery放到页面上。试试这个bookmarklet

然后运行此代码：

(function(){
    var arialNodes = $('div:not(:has(*))').filter(function(){
        return $(this).css('font-family').toLowerCase().indexOf("arial") != -1;
    });
})();

arialNodes变量应包含每个具有'Arial'字体系列的叶节点。然后，您可以使用它来确定哪个父元素具有声明。

或者，如果您只是想查看页面是否合规，只需检查长度。

<强>更新

更新以反映以下评论

(function() {
    var arialNodes = $('*:not(:has(*))', $('body')).filter(function() {
        return $(this).css('font-family').toLowerCase().indexOf("arial") === -1;
    });

    var offendingParents = [];
    arialNodes.each(function(){
        var highestOffendingParent = $(this).parentsUntil('body').filter(function(){
            return $(this).css('font-family').toLowerCase().indexOf("arial") === -1;
        }).last();
        if(offendingParents.indexOf(highestOffendingParent) === -1){
            offendingParents.push(highestOffendingParent);
        }
    });

})();

在滚动页面后，elementFromPoint返回null

2 个答案: