1. スタイル シートの幅や境界線の色などの CSS を取得します (行間は除く)。主に IE6 ~ 7 は currentStyle をサポートし、標準ブラウザは getComputedStyle をサポートします。例: カプセル化された関数
。
function getStyle(obj,name){
if(obj. currentStyle){
return obj.currentStyle[名前];
else{
return getComputedStyle(obj,false)[名前];
Call: getStyle('color');
2. スクロール距離を取得します
document.body.scrollTop は標準ブラウザに適しています
document.documentElement.scrollTop はバージョンに適しています以下の IE9
互換性は次のように記述できます
var top = document.body.scrollTop | document.documentElement.scrollTop;
標準ブラウザ: のパラメータとしてのイベント オブジェクトイベント関数
IE の下位バージョンではイベント オブジェクト (グローバル) を直接使用する必要があります
コードをコピーします
イベントはイベント オブジェクトとして使用されます
4. イベントIEのバインディング イベントをattachEvent/detachEvent(バインディングまたはキャンセル)として定義します addEventListener/removeEventListener(バインディングまたはキャンセル)
イベントバインディングにおけるパラメータは以下の通りです。関数を匿名関数にすることはできません。それ以外の場合は、
addEventListener:
target.addEventListener(type,listener,useCapture); を使用することを忘れないでください。 : ドキュメント ノード、ドキュメント、ウィンドウ、または XMLHttpRequest。
type: 文字列、イベント名。「クリック」、「マウスオーバー」、「キーダウン」などの「on」を除く。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。
useCapture: キャプチャを使用するかどうか。通常は false。例: document.getElementById("testText").addEventListener("keydown", function (event) {alert(event.keyCode); }, false);
IE の場合:
target .attachEvent(type,listener);
ターゲット: ドキュメント ノード、ドキュメント、ウィンドウ、または XMLHttpRequest。
type: 文字列、「onclick」、「onmouseover」、「onkeydown」などの「on」を含むイベント名。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。 例: document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
イベント バインディングのカプセル化関数:
コードをコピー
コードは次のとおりです:
}
これがバインドされたイベント fn 関数で使用される場合、これは obj ではなくウィンドウ (IE の以前のバージョンのみにこのバグがあります) であることに注意する必要があります。
コードをコピーします
コードは次のとおりです。
addEvent(document,'click',function(ev) {
var ev =ev||window.event;
var target = ev.target||ev.srcElement; // イベント ソースの取得は主に IE の低バージョンでのバグです。 window alert(target) }) ; バインディングキャンセルイベント fn は関数名です
コードをコピーします
コードは次のとおりです。
function RemoveEvent(obj,ev,fn){
if(obj.detachEvent){
5.ajax
Ajax は XMLHttp オブジェクトを作成します 標準バージョンのブラウザおよび IE 以前のバージョンは、XMLHttp オブジェクトを作成するための
標準バージョンと互換性がありません:
コードをコピー
コードは次のとおりです:
//1。オブジェクト
if(window.XMLHttpRequest)
{
var oAjax=new を作成します。 XMLHttpRequest();//標準ブラウザ } else { var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE 下位バージョン}
alert( oAjax);
6. デフォルトイベントをキャンセルする
js でのデフォルトイベントキャンセルは主に return false とPreventDefault の 2 種類です。
デフォルトイベントの return false はどのブラウザでも互換性がありますが、イベントが発生した場合は、 addEventListener がバインドされている場合、キャンセルされます。 デフォルトのイベントを失わずにデフォルトの右クリック イベントをキャンセルする例:
document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function (){
return false;
}
7. call と apply の違い
call と apply は関数
を呼び出すことができます。たとえば、
function show(){
alert(this)
}
//show(); ポップアップウィンドウ
//show .call(); ポップアップウィンドウ
//show.call(this) // ポップアップウィンドウ
//show. call(5); //ポップアップ 5;
show.call(this,5) ; //ポップアップウィンドウ
call(this, arg1, arg2,...) call の this パラメータは主にイベント オブジェクトを参照し、後続のパラメータは関数内で使用されるパラメータであることがわかります。
call と apply を使用して主にこれを変更します。機能的には通常の関数と大きな違いはありません。 🎜>apply(this,arguments) は主にパラメータが不確実な場合に使用されます
8. DOM 取得サブタイトルの子ノードと childNodes
子は最初のレイヤーを取得することによってのみ子ノードを取得でき、ラベル ノードである必要があります
例:
< a href="#">テキスト 1テキスト 2 children[0] 最初のタグchildren[0].children[0]を取得したい場合は、最初のスパンのみを取得できるため、子の長さは
childNodesのみになります。 Firefox と Google では、空のテキストの長さは 5 ですが、IE の以前のバージョン (6 ~ 8) では長さは 4 です。