<div class="codetitle"> <span><a style="CURSOR: pointer" data="57143" class="copybut" id="copybut57143" onclick="doCopy('code57143')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div> <div class="codebody" id="code57143"> <br><script type="text/javascript"> <br> //<![CDATA[ <BR>function $(obj) <BR>{ <BR>return document.getElementById(obj); <BR>} <BR>function getStyle(obj,styleName) <BR>{ <BR>if(obj.currentStyle) //ies の場合 <BR>{ <BR>return obj.currentStyle[styleName] //取得方法に注意<BR>} <BR>else //その他の場合<BR>{ <BR>return document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName); <BR>//return document.defaultView.getComputedStyle(obj,null)[styleName]; <BR> >} <BR>$ ('btnGetClick').onclick=function() <BR>{ <BR>//タグに直接書かれたスタイルがインラインスタイル、head-styleに書かれたスタイルが内部スタイル、リンクによって紹介されるスタイルは外部スタイルです<BR>//埋め込みスタイルは Dom.style スタイル名から取得できます。スタイル名はキャメルケース形式であることに注意してください。<BR>//内部スタイル。外部スタイルは style を通じて取得できません。 <BR> を取得するには、スタイル名を getComputedStyle に渡す必要があります。//実際、スタイルが埋め込まれている場合、これは簡単に理解できます。属性値はオブジェクト object を返します)、style.style 名を通じてそれを取得できます 🎜>//内部または外部の場合、style 属性はありますが、対応する値は空であるため、取得することしかできません。 currentStyle || getComputedStyle <BR>//alert($('div2').style); OK ポップアップの結果がオブジェクトであることがわかります。これは、スタイルが存在することを意味しますが、その下に対応するスタイル設定が存在します。は空です。 <BR>$('testContent').innerHTML=''; <BR>var str=$('div').style.styleFloat || $('div').style.cssFloat;したがって、style.float は使用できなくなり、ies:styleFloat、ff:cssFloat <BR>str=str ($('div').style.width '<br />'); を使用できます。 =str ($('div2').style.width ' <br />'); //このセクションは内部スタイルを取得できず、null 値を表示しますが、スタイルが存在しないという意味ではありません<br>str=str ($('div2').width ' <br />'); //div2 の dom に width 属性が設定されていないため、未定義を返します<br>str=str getStyle($( 'div2'),'width '); // div2 のスタイルは内部スタイルを通じて提供されるため、 currentStyle を通じて取得します。 || <br>$('testContent').innerHTML=str; 🎜>$('btnUpdateClick').onclick=function() <br>{ <br>// スタイルを設定するときは、埋め込みか外部かに関係なく、これらのスタイル属性 (オブジェクト) を取得できます。 3 つの方法 <br>//これを使用して要素のスタイルを設定します。 <br>$('div').style.width='200px'; ').style.width='100px' ; <br>$('div').style.cssText='background:blue;color:red;font-weight:bold;'; //元の定義が上書きされます。これは style="background:blue; font-size:red;font-weight:bold;" を定義するのと同じです <br>$('div2').className='testClassName'; // <div クラスを設定するのと同等です="testClassName" /> <br>//]]> <br></script> <br><br><br> <br> <br> <br> <br> McJeremy と Xu によるテスト <br> </div> <br> <br> <div class="htmlarea"> <textarea id="runcode98218"> ディビジョン 1<title> </title>ディビジョン 2<meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content="">値を取得<style type="text/css"> #div2 { width:200px; height:100px; margin-left:120px; border:1px dashed blue; } .testClassName { background:red; } </style> 設定値 <div id="div" style="width:100px;height:100px;border:1px solid red;float:left;"> </div> <div id="div2"> </div> <div id="testContent"></div> <button id="btnGetClick"> </button>[Ctrl A すべて選択 注: <button id="btnUpdateClick">外部 Js を導入する必要がある場合は、</button> を実行するために更新する必要があります]</textarea> </div>