Question

未捕获的类型错误：无法读取未定义错误的属性“style”

2015-03-08

9727

javascript jquery html css

我正在尝试使用 Javascript 更改某些 HTML 元素的宽度；目的是使用 innerWidth 属性来确定它。

下面是我的代码：

$(document).ready(function () {
    var footer = document.getElementsByTagName('footer')[0];
    var header = document.getElementsByTagName('header')[0];
    footer.style.width = window.innerWidth - 400;
    header.style.width = window.innerWidth - 400;
});

我正在使用 Javascript 分配页眉和页脚宽度，以防止可能的溢出，导致添加滚动条时溢出。

下面是我的 HTML 代码：

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <header>
        <div id="img_container">
            <a href="#"><img id="header" src="img/Header.png"></a>
        </div>
        <nav>
            <ul>
                <li><a href="#">text</a>
                    <ul>
                        <li><a href="#">text</a></li>
                        <li><a href="#">text</a></li>
                        <li><a href="#">text</a></li>
                        <li><a href="#">Text</a></li>
                    </ul>
                </li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <a href="#"><img id="img" src="img/img.png"></a>
    </header>
    <footer>
        <div id="footer_container">
            <div id="footer_el">
                <span class="header">Services</span>
                <hr> Bunch of links and text
            </div>
            <div id="footer_el">
                <span class="header">Text</span>
                <hr> Bunch of links and text
            </div>
            <div id="footer_el">
                <span class="header">About us</span>
                <hr>
                <a href="#">Some text</a>
                <br>Contact us:
                <br>Email
                <br>Phone number
            </div>
            <div id="footer_el">
                <span class="header">Partners</span>
                <hr> Yaadiyaadiyaa
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div>Some text...
        </div>
    </footer>
</body>

</html>

下图显示了我在 Google Chrome 浏览器控制台中收到的实际错误：

"Uncaught TypeError: Cannot read property 'style' of undefined" error

Answer 1

如果您的页面上有页眉和页脚，您的代码当然应该返回页眉和页脚。如果您的页面上没有，您将收到上述错误。您可能还需要在语句末尾添加“px”以使宽度设置起作用。

$(document).ready(function() {
  var footer = document.getElementsByTagName('footer')[0];
  var header = document.getElementsByTagName('header')[0];
  footer.style.width = (window.innerWidth - 400) + "px";
  header.style.width = (window.innerWidth - 400) + "px";
});

header {
  background-color: red;
}
footer {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Header</h1>
</header>
<footer>
  <h1>Footer</h1>
</footer>