时间戳

首页 > 解决方案 > 为什么这个用于更改 css id 的 Javascript 命令不起作用？

javascript - 为什么这个用于更改 css id 的 Javascript 命令不起作用？

问题描述

我试图为我的PicInnercss 类设置背景图像，但它不起作用，所以我试图改变背景颜色：

function changeBackground()
{
    $('.PicInner').css('background', 'orange');
}

我已经在没有.for 类选择器的情况下尝试过，但这也不起作用。什么可以压倒这一切？

我知道该函数正在被调用，因为我插入了Alert("Hello!");一行并且每次刷新页面时它都会弹出，但是我的.PicInner班级的背景颜色并没有改变。我已经在PicInner课堂上更改了 F12 编辑器中的背景，它工作正常，只是 javascript 似乎并没有改变我的任何东西。

我哪里会出错？

相关的html部分是

<script>

    changeBackground();

    function changeBackground()
    {
        alert("HELLO!");
        ('.PicInner').css('background', 'orange');
    }
</script>

<link rel="stylesheet" type="text/css" href="~/css/CJBStyles.css">

<div class="wContainer">
    <div class="cjb-bkg">
        <div class="PicInner">
            <h3>Bespoke Kitchens, bathrooms and fittings</h3>
            <h3>Prestigious and high quality</h3>
        </div>
    </div>
</div>

PicInner 的 css 是：

.PicInner{
    background: rgba(255,255,255,0.8);
    padding: 10px;
    text-align:center;
    position: relative;
}

标签： javascriptcss

解决方案

这是在“页面加载”事件中触发的函数：

function changeBackground() {
  var elm = document.querySelector('.PicInner');
  elm.style.backgroundColor = 'orange'
}

changeBackground();
.PicInner {
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  text-align: center;
  position: relative;
}
<div class="wContainer">
  <div class="cjb-bkg">
    <div class="PicInner">
      <h3>Bespoke Kitchens, bathrooms and fittings</h3>
    </div>
  </div>
</div>

片段中不能有标签，但我会让你知道，在“真实”网页中，你可以changeBackground()在页面加载时显式触发：

<body onload="changeBackground()">

推荐阅读