Question

如何在 Javascript 中更改标题高度？

2019-12-16

1643

javascript html css header

我试图在 Javascript 代码中动态更改页眉高度（在第二个 if 语句中）。这是我目前拥有的代码：

var currentDate =  new Date();
    // Months are zero indexed, so for 21 December:
    var saleStart = new Date("12-10-2017");
    var saleEnd = new Date("12-19-2019");

    if (saleStart <= currentDate && currentDate <= saleEnd && sessionStorage.getItem('firstVisit') === null) {
        // Set display to '' (empty string) so the element adopts its default or inherited value
        $(".sale_banner").show();
        $(".hover_bkgr_fricc").show();
        sessionStorage.setItem('firstVisit', '1');

    }
    else if(saleStart <= currentDate && currentDate <= saleEnd)
    {
        document.getElementsByClassName('header').style.height="140px";
        $(".sale_banner").show();
    }
    else{
        $(".sale_banner").hide();

    }

出于某种原因，更改页眉高度的行没有任何作用！我也尝试使用 getElementbyId ，但它也没有作用！

我的 header.phtml 文件打开时带有以下标记：

<header class="desktop">

这是我试图更改的 CSS 部分：

header.desktop {
  height: 173px;
  background-color: #6E348C;
}

我在括号中使用了 header,desktop,header.desktop ，但仍然没有成功！这是我在控制台上收到的错误：

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLDocument.<anonymous> (myproject.js:28)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

有人知道我遗漏了什么吗？

Answer 1

使用 getElementsByClassName 总是返回一个数组，您可能希望将其更改为

document.getElementsByClassName('header')[0].style.height="140px";

假设您只有一个标题元素，如果可以使用 id 而不是类名就好了

Answer 2

我没有看到您的 HTML 代码，但我猜您没有 header 类。您的 CSS 建议您有一个带有 desktop 类的 header 标签（header.desktop）然后，您应该尝试使用 getElementsByClassName 或 querySelector ，：

document.getElementsByClassName('desktop')
// or
document.querySelector('.desktop')

您可以使用其中任何一个，但 querySelector 是一种更现代的方法，并且只返回一个元素（如果您有多个具有相同类名的元素，请尝试 querySelectorAll 或 getElementsByClassName ）

检查一下： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

更新： 尝试一下

function changeHeight() {
  // Note that the class name is 'desktop', while 'header' is the name of the HTML tag
  document.querySelector('.desktop').style.height = "100px"
}

header.desktop {
  height: 50px;
  background-color: #6E348C;
}

<header class="desktop">This is the header</header>
<button onclick="changeHeight()">Change height</button>