Javascript 未捕获类型错误：无法读取属性'；风格'；未定义错误的定义_Javascript_Jquery_Html_Css

Javascript 未捕获类型错误：无法读取属性'；风格'；未定义错误的定义

javascript jquery html css

Javascript 未捕获类型错误：无法读取属性'；风格'；未定义错误的定义,javascript,jquery,html,css,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.inn

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














服务
一堆链接和文本
正文
一堆链接和文本
关于我们


联系我们：

电子邮件

电话号码
合作伙伴
yaadiyaa


















一些文字。。。

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

如果页面上有页眉和页脚，代码当然应该返回页眉和页脚。如果您的页面上没有一个错误，则会出现上述错误。您可能还需要在语句的末尾添加“px”，以使宽度设置生效

$（文档）.ready（函数（）{
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”；
});
标题{
背景色：红色；
}
页脚{
背景颜色：绿色；
}

标题
页脚
问题不在主题附近：我没有关闭标记，之后的所有内容，包括页脚，都没有正确加载到页面中。无论如何谢谢你！总是这样。是“，”，），}，]或>。很高兴你发现了这个问题。但我欢呼得太快了-页眉和页脚不在乎我分配给他们的宽度：/min宽度设置在其他地方？谢谢！我只是瞎了眼。