5

骨の折れる作業をもう少し耐えられるようにするためにまとめた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が未定義であることをログに記録し始めます。

何か案は？

4

2 に答える 2

9

さて、それでは、それを理解しました。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);
    }
};
于 2012-11-02T06:53:07.527 に答える
0

うーん、マウスでチェックする代わりに、すべての葉のノードをチェックしてみませんか？いずれかのリーフノードにarialのフォントファミリがある場合、その祖先の1つにArialのフォントファミリがあることを示す必要があります。

まず、jqueryをページに取り込む必要があります。このブックマークレットをお試しください

次に、次のコードを実行します。

(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);
        }
    });

})();
于 2012-11-02T05:30:51.247 に答える