2

子div（ezblog-head）が存在する場合、親div（content-indent）の背景画像を変更する必要があります。私はウェブ上でたくさんの答えを見つけました。しかし、私はそれらのどれも機能させることができないようです。

実際のindex.phpページは次のようになります:(サイトはJoomlaで構築されています）

<div class="content-indent">
    <jdoc:include type="component" />
</div>

これはブラウザに次のように読み込まれます。

<div class="content-indent">
    <!-- bunch of other stuff -->
    <div id="ezblog-head>
        <!-- more stuff -->
    </div>
</div>

これが私のインデックスページで使用しているJavascriptです（動作していません）

<script type="text/javascript">
    if ($('#ezblog-head')[0]){
      <style>
       .content-indent {background: #0f0;}
      </style>
    }
</script>`

私もこれを試しました（無駄に）：

<script type="text/javascript">
    if (document.getElementById("ezblog-head")) { 
        document.getElementByClass('content-indent').style.background ='#0f0'
    }
</script>

どんな助けでも大歓迎です。ありがとう！

4

3 に答える 3

0

最後のsans-jqueryの例はほぼそこにありますが、getElementsByClassName（'content-indent'）[0]を使用する必要があります（複数形に注意してください）

さらに簡単なのは、querySelectorを使用することです。

// change background of parent div (content-indent) when child div (ezblog-head) is present
if (document.querySelector('#ezblog-head')) {
  document.querySelector('.content-indent').style.backgroundColor = '#0f0';
}

他の場所で述べたように、domがロードされた後にコードを実行していることを確認してください。

window.addEventListener('load', function() {
  // do stuff here, the DOM is ready
});
于 2012-11-21T20:26:51.653 に答える
0

スタイル タグを使用する代わりに、 jQuery を使用します.css()。これはプレーンな JavaScript ではなく jQuery を使用しているため、このスクリプト ブロックの前に jQuery への参照も必要になることに注意してください。

if ($('#ezblog-head')) {
     $('.content-indent').css({'background': '#0f0'});
}
于 2012-11-21T20:22:37.910 に答える
0

指定された ID は (ページに 1 つしかないと仮定ezblog-headして) 使用できます。

<script type="text/javascript">
var ezblogHead = document.getElementById('ezblog-head');
if (ezblogHead){
    // ezblog-head exists on the page. Now, grab it's parent (content-indent)
    // and apply the bakground styling you prefer.
    ezblogHead.parentNode.style.backgroundColor = '#0f0';
    // alternatively, if you wanted an image:
    //ezblogHead.parentNode.style.backgroundImage = 'url(/path/to/background.jpg)';
}
</script>

要素がページにレンダリングされた後にこれがリストされていることを確認してください。そうでない場合は、上記を DOMReady イベントにバインドする必要があります。

于 2012-11-21T20:22:44.383 に答える