Question

当存在子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>

非常感谢任何帮助。谢谢！

Answer 1

使用jQuery .css()而不是使用样式标记。请注意，这是使用jQuery而不是普通的javascript，因此您还必须在此脚本块之前引用jQuery。

if ($('#ezblog-head')) {
     $('.content-indent').css({'background': '#0f0'});
}

Answer 2

鉴于ezblog-head是一个ID（假设页面中只有一个），您可以使用：

<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事件。

Answer 3

你的最后一个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
});

如果存在子div，则使用javascript更改背景

3 个答案: