时间戳

首页 > 解决方案 > 无法在 /script.js:13:15 处读取未定义的属性“样式”

javascript - 无法在 /script.js:13:15 处读取未定义的属性“样式”

问题描述

为什么它不计算样式并写入错误，我该如何解决？似乎他正确指示了所有路径，连接了样式和脚本，但他要么根本不阅读它们（样式），要么显示这样的错误。这是代码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;
}

标签： javascripthtmlcss

解决方案

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

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

干得好

推荐阅读