ホームページ > 記事 > ウェブフロントエンド > IEとFireFox_javascriptスキルのJS共通機能の違いまとめ

IEとFireFox_javascriptスキルのJS共通機能の違いまとめ

WBOYオリジナル: 2016-05-16 18:32:32994ブラウズ

1.event.srcElement

コードをコピーコードは次のとおりです。

 
//srcElement can以下は IE でのみ使用できます。 以下に使用するターゲットは FireFox で使用されます。 
var obj = e.srcElement ? e.srcElement : e.target; e.originalEvent.x

コードをコピーコードは次のとおりです。 // e. originalEvent.x は IE、FireFox でのみ使用可能 e.originalEvent.layerX のみ使用可能以下は互換記述メソッドです。

var PositionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset ().left 0;

 
3.windows.event 
window.event は Firefox ではなく、IE でのみ実行できます。 , 

これは、Firefox のイベントがイベントが発生した場合にのみ使用できるためです
IE:

コードをコピーコードは次のとおりです:

 


 

 

 

 id="test3 " type="button" > 

 
 <br><br><br></body> ; <br> </html> <BR><BR> <BR>4.innerText <BR><br><br><BR><BR><BR></div> <BR> コードは次のとおりです: <br><br> <BR><html> <div class="codetitle"><head> <span><meta http-equiv="Content-Type" content="text/html; charset =gb2312" /> ; <a style="CURSOR: pointer" data="57781" class="copybut" id="copybut57781" onclick="doCopy('code57781')"><title> IE と Firefox の互換性にご注意ください</title> <u></head> </u><script language="javascript"> </a> </span>function testInnerText (){ </div>if(navigator.appName.indexOf("Explorer") > -1){ <div class="codebody" id="code57781">document.getElementById('element').innerText = "私のテキスト"; >} else{ <br>document.getElementById('element').textContent = "私のテキスト"; <br>} <br>} </script> <br><body> ="ボタン" タイプ ="ボタン" 値="testInnerText" onclick="javascript:testInnerText()"/> <br><div id="element" style="border:1px Solid #0066CC; width:100px ; 高さ:50px" ></div> <br></body> <br></html> <br><br><br>5.CSS "float" プロパティ <br><br><br>特定のオブジェクトの特定の CSS プロパティを取得するための基本構文は object.style プロパティであり、ハイフンでつながれたプロパティは Camel 命名法に置き換える必要があります。たとえば、ID が「header」である div の背景色属性を取得するには、次の構文を使用する必要があります: <br><br>document.getElementById("header").style.borderBottom= "1px Solid #ccc"; <br><br>しかし、「float」は JavaScript の予約語であるため、object.style.float を使用して「float」属性を取得することはできません。以下は 2 つのブラウザで使用するメソッドです。 <br><br>IE 構文: <br><br>document.getElementById("header").style.styleFloat = "left"; Firefox 構文: <br><br>document.getElementById("header").style.cssFloat = "left"; <br>6. 要素 <br><br><br> の計算されたスタイル。上記のオブジェクトを使用します。 style.property を使用すると、JavaScript でオブジェクトの設定された CSS スタイルを簡単に取得および変更できます。ただし、この構文の制限は、HTML 内のインライン スタイル、または JavaScript を使用して直接設定されたスタイルのみを取得できることです。スタイル オブジェクトは、外部スタイル シートを使用して設定されたスタイルを取得できません。オブジェクトの「計算されたスタイル」を取得するには、次のコードを使用します: <br><br>IE 構文: <br><br><br><div class="codetitle">
<span>コードをコピー<a style="CURSOR: pointer" data="40027" class="copybut" id="copybut40027" onclick="doCopy('code40027')"><u></u> コードは次のとおりです: </a></span> </div>var myObject = document.getElementById("header"); <div class="codebody" id="code40027">var myStyle = myObject.currentStyle.backgroundColor; <br><br> <br>Firefox の構文: </div> <br><br><div class="codetitle">
<span>コードをコピー<a style="CURSOR: pointer" data="66730" class="copybut" id="copybut66730" onclick="doCopy('code66730')"><u></u> コードは次のとおりです。</a></span> </div>var myObject = document.getElementById("header "); <div class="codebody" id="code66730"> var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); <br>var myStyle = myComputedStyle.backgroundColor; <br><br> <br>7. 要素の「class」属性を取得します</div>
<br><br>「float」属性の場合と同様に、2 つのブラウザはこの属性を取得するために異なる JavaScript メソッドを使用します。 <br><br>IE 構文: <br><br><br><div class="codetitle">
<span> コードをコピー <a style="CURSOR: pointer" data="86620" class="copybut" id="copybut86620" onclick="doCopy('code86620')"><u></u> コードは次のとおりです: </a></span> </div> var myObject = document.getElementById("header"); <div class="codebody" id="code86620">var myAttribute = myObject.getAttribute("className"); <br><br> <br>Firefox 構文: </div>
<br><br><div class="codetitle">
<span>コードをコピーします<a style="CURSOR: pointer" data="53508" class="copybut" id="copybut53508" onclick="doCopy('code53508')"><u></u> コードは次のとおりです:</a></span> </div>var myObject = document.getElementById("header"); <div class="codebody" id="code53508">var myAttribute = myObject。 getAttribute("class") ; <br><br> <br>8. ラベルの「for」属性を取得します。 </div>
<br><br> 3 と同様に、JavaScript を使用してラベルの「for」属性。 <br><br>IE 構文: <br><br><br><div class="codetitle">
<span> コードをコピー <a style="CURSOR: pointer" data="52845" class="copybut" id="copybut52845" onclick="doCopy('code52845')"><u></u> コードは次のとおりです: </a></span> </div> var myObject = document.getElementById("myLabel"); <div class="codebody" id="code52845">var myAttribute = myObject.getAttribute("htmlFor"); <br><br> <br>Firefox 構文: </div>
<br><br><div class="codetitle">
<span>コードをコピーします<a style="CURSOR: pointer" data="28277" class="copybut" id="copybut28277" onclick="doCopy('code28277')"><u></u> コードは次のとおりです:</a></span> </div>var myObject = document.getElementById("myLabel"); <div class="codebody" id="code28277">var myAttribute = myObject。 getAttribute("for") ; <br><br> <br>setAttribute メソッドにも同じ構文が使用されます。 </div>
<br>9. カーソル位置の取得 <br><br><br>これを行う必要がある場合、IE と Firefox の構文も異なります。このサンプル コードはかなり基本的なもので、通常は多くの複雑なイベント ハンドラーの一部として使用され、ここでは違いを説明するためにのみ使用されます。 IE での結果は Firefox での結果とは異なるため、このアプローチにはいくつかの問題があることに注意してください。通常、この違いは「スクロール位置」を取得することで補正できますが、それについては別の記事で説明します。 <br><br>IE 構文: <br><br><br><div class="codetitle">
<span> コードをコピー <a style="CURSOR: pointer" data="1979" class="copybut" id="copybut1979" onclick="doCopy('code1979')"><u></u> コードは次のとおりです: </a></span> </div> var myCursorPosition = [0, 0]; <div class="codebody" id="code1979">myCursorPosition[0] = イベント.clientX; <br><br> <br>Firefox 構文: <br>
</div>
<br><br><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="54317" class="copybut" id="copybut54317" onclick="doCopy('code54317')"><u> コードは次のとおりです:</u><div class="codebody" id="code54317"> <br>var myCursorPosition = [0, 0]; <br>myCursorPosition[0] = イベント.pageX; <br><br> </div>10.ウィンドウまたはブラウザ ウィンドウのサイズを取得する<br><br><br>通常は「ウィンドウ」と呼ばれる、ブラウザの有効ウィンドウ スペースのサイズを確認する必要がある場合があります。 <br><br>IE 構文: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="97302" class="copybut" id="copybut97302" onclick="doCopy('code97302')"> コードをコピー <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code97302"> var myBrowserSize = [0, 0]; <br>myBrowserSize[0] = document.documentElement.clientWidth; <br>myBrowserSize[1] = document.documentElement.clientHeight; <br><br> </div>Firefox の構文: 🎜><br><br><div class="codetitle">
<span>コードをコピーします<a style="CURSOR: pointer" data="21464" class="copybut" id="copybut21464" onclick="doCopy('code21464')"><u></u> コードは次のとおりです。</a></span> </div>var myBrowserSize = [0, 0]; 🎜>myBrowserSize[0] = window.innerWidth; <div class="codebody" id="code21464">myBrowserSize[1] = window.innerHeight; <br><br> <br>11.Alpha 透明 <br>
</div>
<br>これは実際にはJavaScript 構文項目ではありません - アルファ 透明度は CSS 経由で設定されます。ただし、オブジェクトが JavaScript を介してフェードするように設定されている場合、これは、通常はループ内で CSS アルファ設定を取得することによって実現する必要があります。次の JavaScript を通じて CSS コードを変更するには: <br><br>IE 構文: <br><br><br><br><div class="codetitle"> コードをコピー <span><a style="CURSOR: pointer" data="48976" class="copybut" id="copybut48976" onclick="doCopy('code48976')"><u> コードは次のとおりです。 </u> </a> </span>#myElement { </div>filter: alpha(opacity=50) <div class="codebody" id="code48976">} <br><br> <br>Firefox 構文: <br>
</div>
<br><br><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="13324" class="copybut" id="copybut13324" onclick="doCopy('code13324')"><u> コードは次のとおりです:</u></a> </span>#myElement { </div>opacity: <div class="codebody" id="code13324">} <br> <br> <br>使用方法 JavaScript でこれらの値を取得するには、スタイル オブジェクトを使用する必要があります: <br>
</div>IE 構文: <br><br><br><br><div class="codetitle">Copyコード <span><a style="CURSOR: pointer" data="46840" class="copybut" id="copybut46840" onclick="doCopy('code46840')"><u> コードは次のとおりです: </u></a> </span>var myObject = document.getElementById("myElement"); </div>myObject.style.filter = "alpha(opacity) =80)"; <div class="codebody" id="code46840">
<br> <br>Firefox 構文: <br>
</div>
<br><br><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="19732" class="copybut" id="copybut19732" onclick="doCopy('code19732')"><u> コードは次のとおりです:</u></a> </span>var myObject = document.getElementById("myElement"); </div>myObject.style.opacity = "0.5"; <div class="codebody" id="code19732">
<br> <br>もちろん、前述したように、opcity /alpha は通常、アニメーション効果を作成するためにループの途中で変更されますが、これはメソッドの実装方法を明確に説明するための単純な例です。 <br>作者: </div>HeroBeast<br></a></span>
</div>
</div>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="jQuery レッスン 3 要素の属性と Content_jquery を変更するコード" href="http://m.php.cn/ja/faq/22417.html">jQuery レッスン 3 要素の属性と Content_jquery を変更するコード</a></span><span>次の記事：<a class="dBlack" title="jQuery レッスン 3 要素の属性と Content_jquery を変更するコード" href="http://m.php.cn/ja/faq/22419.html">jQuery レッスン 3 要素の属性と Content_jquery を変更するコード</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>