Question

我正在尝试使用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

如果您的网页上有一个页面，您的代码肯定会返回页眉和页脚。如果您的页面上没有一个，您将收到上述错误。您可能还需要添加＆＃34; px＆＃34;到语句的末尾以使宽度设置起作用。

＆＃13;

$(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";
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的错误

1 个答案: