javascript - Javascript getElementById()

Question

イベントの属性を変更する汎用 JavaScript 関数を作成しようとしています。

それが機能する方法は

function fooFunction(sourceElement) 
{    
  var newName = sourceElement+'Span';    
  var newElement = document.getElementById(newName);
  //Important line
  newElement.property = "enter properties here";
}

そして、私はそれを次のようなもので呼び出します

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/>
<span id="fooSpan" name="fooSpan">some text here</span>

したがって、理論的には、画像をホバリングすると、fooSpan オブジェクトで変更する必要があるプロパティが変更されるはずです。Opera では動作しますが、IE では null オブジェクトを返します。

何か案は？

アイデアは、関連付けられたテキストスパン (通常は css スタイル) でプロパティの変更を自動的にトリガーする複数の画像を用意することです。

score 1 · Accepted Answer

IE で ID を正しく取得していますか? 渡された ID が IE で null である可能性があります (おそらく this.id が機能していませんか?)。

次のように呼び出してみてください。

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/>

そして、それが役立つかどうかを確認してください。getElementById() が失敗する理由がわかりません。そのため、考えられる唯一のことは、ID の問題であるということです。

score 0 · Accepted Answer

jQuery の組み込み attr() メソッドの使用を検討することを強くお勧めします。このメソッドは、必要な機能をブラウザー間で完全に統合し、信じられないほど使いやすいです。

あなたの例を使用して、「foo」の「src」プロパティを変更したい場合は、1 行のコードでそれを行うことができます。

$("#foo").attr("src","images/whatever.png");

同様に、「fooSpan」内の html を変更したい場合は、次のようにするだけです。

$("#fooSpan").html("something else");

これらを onmouseover プロパティよりもはるかに柔軟なイベントに結び付けることもできます:

$(document).ready(function(){
$("#foo").mouseover(function(){
    $("#fooSpan").html("something else");
    $("#foo").attr("src","images/whatever.png");
    });
});

score 0 · Accepted Answer

この行は IE では機能しない可能性があります。「newElement.property」正確な理由はわかりません。

その行の代わりにこれを使用できます

newElement.setAttribute(property,"ここにプロパティを入力");

その間、エラーの背後にある理由を見つけようとしています。

score 0 · Accepted Answer

私の提案は、このようなことをするでしょう。

function fooFunction(sourceElement,property,propertyValue) {    
  var newElement = document.getElementById(sourceElement);
  newElement.setAttribute(property,propertyValue);
};

HTML は次のようになります。

<img src="foo.gif" id="foo" name="foo" 
           onmouseover="fooFunction('fooSpan','class','mouseover_span');"/>
<span id="fooSpan" name="fooSpan">some text here</span>

javascript - Javascript getElementById()

4 に答える 4

Related

Reference