DOCTYPEブレークstyle.display

Question

私は、引数要素の子ノードを表示または非表示にする（レガシー）JS関数を持っています。,タグを表示/非表示にするには、mouseoverとmouseoutイベントハンドラで使用されます。 関数は次のようになります。

function displayElem(elem, value, handlerRoot){ 
try{ 
    var display = 'inline'; 
    if(!value) 
     display = 'none'; 
    if(handlerRoot) 
     elem.style.display = display; 
    var childs = elem.childNodes; 
    for (i = 0; i < childs.length; i++){ 
     if(childs[i].nodeType == Node.ELEMENT_NODE){ 
      childs[i].style.display = display; 
      alert("Node "+childs[i].tagName+" style set to " +childs[i].style.display); 
     } 
    } 
}catch(e){ 
    alert('displayElem: ' + e); 
} 
} 

ここ

、valueとhandlerRootはブールフラグです。 ターゲットHTMLページにdoctypeがない場合、この関数は完全に機能します。任意のdoctype（厳密または過渡的）を追加すると、これが中断されます。警告はスタイルが適切な値に設定されていることを示しますが、子要素は表示されません。
この関数が任意のDOCTYPEで動作する場合は、良いでしょう。

画像（ elemの子ノード）は、この（おそらく何かがここで間違っている？）のように初期化され

：標準で文書を扱うとき、私はかしら

：

var img = new Image(); 
img.style.cssText = 
'background: transparent url("chrome://{appname}/content/dbutton.png") right top no-repeat;' + 
'position: relative;' + 
'height:18px;'+ 
'width:18px;'+ 
'display:none;'; 

Answer 1

ÁlvaroG. Vicarioに感謝します。彼は正確な答えを出していませんでしたが、正しい方向でした。 私はw3cバリデータでページをチェックして、画像オブジェクトにsrc属性がないことがわかりました。したがって、img.src = "chrome://{appname}/content/dbutton.png";を追加すると助けになりました。

まだ、元のコード作成者がsrcの代わりにbackgroundスタイルを使用していた理由はわかりません。おそらく、それは謎のままです。 :)

Answer 2

更新 （DOCTYPEを持っている）場合、Firefoxは後方互換モード（DOCTYPEなし）で挿入しない暗黙の要素を挿入しているので、画像はelemの直接の子ではなく、その子はelemの子です。画像はelem.childNodesには表示されません。デバッガでコードを歩くことは、ループ内で反復処理している各子ノードのtagNameに通知するが、失敗した場合は最善の方法です。例えば

、このマークアップで：

<table id='theTable'> 
    <tr><td>Hi there</td></tr> 
</table> 

... DOMは次のようになりますので、Firefoxは、tbody要素を挿入します：

<table id='theTable'> 
    <tbody> 
     <tr><td>Hi there</td></tr> 
    </tbody> 
</table> 

...しかし、それはしませんDOCTYPEが赤いニシンの場合を除き、具体的な例になります。これは私がテストしただけで、Firefoxはbackward-compatモードでもそうしているからです。しかしおそらくあなたは2つのわずかに異なる文書をテストしていたでしょうか？あるいは、それは標準モードでのみいくつかの要素でそれを行います。

---

オリジナル：関数内で宣言されていない、ので、あなたは獲物を落下している

1. i：

   はすぐに問題を見ていないが、私は二つの問題を参照していますHorror of Implicit Globalsにアラートが正しい値を示しているので、なぜそれが問題になるのかわかりません。

2. url(..)は引用符を使用していません。Yes they can、任意に。

Answer 3

JavaScriptはプレーンHTMLではなく、ブラウザで生成されたDOMツリー上で実際には動作しません。したがって、DOCTYPEはJavaScriptに直接影響するものではなく、ブラウザが無効なHTMLやCSSを処理する方法に影響します。

まず、HTMLをクリーンアップし、有効であることを確認してください。そのタグは許可された場所で使用され、適切にネストされます。これは、生成されたノードツリーがレンダリングモードに関係なく同じであることを保証する。

また、お気に入りのブラウザツール（Firebugなど）を使用して実際のツリーを検査し、ノードが自分が思うところに配置されていることを確認することもできます。