Question

无法读取 /script.js:13:15 处未定义的属性“style”

2020-11-16

446

javascript html css

为什么它不计算样式并显示错误，我该如何修复它？似乎他正确地指示了所有路径，连接了样式和脚本，但他要么根本没有读取它们（样式），要么显示这样的错误。这是代码 html、javascript、css。你如何修复这个错误？一般情况下不是这样吗？

html：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src = "script.js">
    </script>
    <TITLE></TITLE>
  </head>
  <body>
<div class="cookie_notice">
    This site uses cookies
    <div>
        <a class="cookie_btn" id="cookie_close" href="#close">Agree</a>
        <a class="cookie_btn" href="#politika">privacy policy</a>
    </div>
</div>
  </body>
</html>

JS：

function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
let cookiecook = getCookie("cookiecook"),
cookiewin = document.getElementsByClassName('cookie_notice')[0];    
if (cookiecook != "no") {  
    cookiewin.style.display="block"; 
    document.getElementById("cookie_close").addEventListener("click", function(){
        cookiewin.style.display="none";    

        let date = new Date;
        date.setDate(date.getDate() + 1);    
        document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();               
    });
}

css：

.cookie_notice {
    display: none;
    position: fixed;
    z-index: 9999999;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 15px;
    font-family: Verdana, sans-serif;  
    color: #FFF;
    background: #337AB7;
    padding: 10px 20px; 
    border-top: 4px solid #BFE2FF;
}
.cookie_btn {
    display: inline-block;
    margin: 10px 6px 4px 6px;
    text-decoration: none;
    position: relative;
    font-size: 13px;
    padding: 4px 12px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase; 
    background: #337AB7;
    border: 2px solid #BFE2FF;
}
.cookie_btn:hover {
    color: #FFF;
}
.cookie_btn:after,
.cookie_btn:before {
    position: absolute;
    height: 2px;
    left: 50%;
    background: #FFF;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}
.cookie_btn:before {
    top: -6px;
}
.cookie_btn:hover:after,
.cookie_btn:hover:before {
    width: 100%;
    left: 0;
}

Answer 1

你为什么不尝试在底部制作标签。像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <TITLE></TITLE>
  </head>
  <body>
<div class="cookie_notice">
    This site uses cookies
    <div>
        <a class="cookie_btn" id="cookie_close" href="#close">Agree</a>
        <a class="cookie_btn" href="#politika">privacy policy</a>
    </div>
</div>

<script src = "script.js">
    </script>
  </body>
</html>

给你

Answer 2

HTML 是从上到下读取的，因此在呈现页面的其余部分之前会调用脚本。

cookiewin = document.getElementsByClassName('cookie_notice')[0];

此行代码正在访问尚未加载的元素，导致 undefined 。要解决此问题，只需将脚本标记放在结束 body 标记之前即可。