どのように私はCSSでhtmlのjavascript関数を埋め込むことができますか？

Question

私は "background_url"というjavascript関数を持っていて、 というランダムな背景画像を出力しています。

私はこのように関数を呼び出すしようとしています：

<td style="<script type="text/javascript">background_url();</script>"></td> 

が、私のブラウザに出力された唯一のものは、次のとおりです。

文字列「background_url（）;」私はそれを修正するために何ができるか背景画像は表示されません

function background_url(){ 

var myimages=new Array() 
myimages[1]="images/img1.jpg" 
myimages[2]="images/img2.jpg" 
myimages[3]="images/img3.jpg" 
//call a random function that returns id of image etc    
    document.write('background-image: url('+myimages[id]+')'); 
} 
     </script> 

を、次のように

javascript関数はありますか？

ありがとうございます。事前にありがとうございます。

Answer 1

しないでください。

正しい方法を実行します。

td要素にクラス（背景を共有する複数の要素がある場合）またはid（この要素が一意の場合）を指定し、JavaScriptを使用して適切なセレクタを使用してスタイルを設定します。

var tds = document.querySelectorAll('td.some-class-name'); 
for(var i = 0; i < tds.length; i++){ 
    var td = tds[i]; 
    td.style.backgroundImage = 'url(' + randomImageUrl + ')'; 
} 

それとも、あなたはjQueryのようなライブラリを使用している場合、それは少し簡単です：内側：

$('td.some-class-name').css('background-image','url(' + randomImageUrl + ')'); 

Answer 2

あなたに実行している事は、スクリプトの実行が2ヶ所で発生する可能性があります。それは、イベントハンドラだ場合にのみ、属性の一部として、属性にするか、することはできません<script>タグが（だからあなたの選択肢は次のとおりです。

<script> 
background_url() 
</script> 

または

これらを考える

<script src="path/to/your/script.js"></script> 

それとも

<td onmouseover="background_url()"> 

は、人々は、あなたが問題のコードにあなたの要素をリンクするためにいくつかのメカニズムを持っている必要がありますを意味し、2番目のオプションを使用しようとすると、通常、あなたの選択です。つまり、あなたのtdでidを追加できます：

<td id="randomBgElement"> 

はその後のonload次の操作を行います。

"background_url()"

document.getElementById('randomBgElement').style = background_url() 

はbackground-image: url(images/img3.jpg)はランダムに生成されたように、有効なスタイルを返す関数です。