来自HTML的JS getAttribute（）返回始终为null

Question

嗨，我想制作一个隐藏/显示菜单。我用div来定义我的菜单。当分辨率小于平板电脑屏幕时，它的显示属性为无。我用另一个div的onclik =“”作为启动函数的按钮。在函数中，我试图获取显示条件来阻止错误。当我得到它时，如果它没有显示，我会将属性更改为阻止。

/* ************************************************* Ortak Masaüstü Başlangıç************************************************* */
#header {
    height: 56px;
    width: 100%;
    text-align:center;
    vertical-align: middle;
    border-bottom: solid 1px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    position: fixed;
    z-index:1;
    background-color: white;
}
#header img {
    height: 100%;
}
#header img:hover {
    opacity: 0.7;
}
#orta {
    margin-top: 3px;
    padding-top: 56px;
    background-image: url(img\back.png);
}
#orta .sol {
    width: 15%;
    height: 600px;
    float: left;
}
#orta .merkez {
    width: 70%;
    height: auto;
    -webkit-box-shadow: 10px 20px 5px #aaaaaa;
    -moz-box-shadow: 10px 20px 5px #aaaaaa;
    box-shadow: 10px 20px 5px #aaaaaa;
    float: left;
    background-color: #2eb2ff;
    border-radius: 5px;
    opacity: 0.75;
    padding: 20px 20px 105px 20px;
}
#orta .merkez h2 {
    text-align: center;
    width: 100%;
    height: auto;
}
#orta .merkez .icerik {
    height: auto;
}
#orta .sag {
    width: 15%;
    height: 600px;
    float: left;
}


/* ************************************************* Ortak Masaüstü Bitiş************************************************* */







#orta .merkez .icerik button {
    width: 100%;
    padding:2px;
    margin-top:2px;
}


#mySidenav a {
    position: fixed;
    left: -80px;
    transition: 0.3s;
    padding: 10px;
    width: 110px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
    left: 0;
    box-shadow: 5px 5px 2px #aaaaaa;
}
.acilirmenu {
    position: fixed;
    width: 40px;
    height: 33px;
    left: 5px;
    top: 5px;
    background-color: #555;
    border-radius: 3px;
    z-index: 1;
    opacity: 0;
}
#uccizgi1, #uccizgi2, #uccizgi3 {
    width: 34px;
    height: 5px;
    background: black;
    float: left;
    margin: 3px;
    border-radius: 2px;
    transition:0.3s;
}



#news {
    top: 60px;
    background-color: #555;
    z-index: 1;
}
#blog {
    top: 122px;
    background-color: #4CAF50;
    z-index: 1;
}
#projects {
    top: 184px;
    background-color: #f44336;
    z-index: 1;
}
#about {
    top: 246px;
    background-color: #2196F3;
    z-index: 1;
}
#contact {
    top: 308px;
    background-color: #555;
    z-index: 1;
}
footer {
    background-color: #092834;
    width: 100%;
    margin-top: -100px; /* altAlan yuksekliginin eksi degeri */
    height: 100px;
    clear:both;
    color: #347B98;
    opacity:0.8;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
footer img {
    width: 25px;
}
footer img:hover {
    width: 25px;
    opacity: 0.6;
}
footer .backtotop {
    float: right;
}
footer .backtotop img{
    width: 75px;
    position: absolute;
    right: 25px;
    bottom: 25px;
}

* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}




/* ************************* Projeler ************************* */
.merkez .icerik .projeler {
    height: 250px;
    width: 50%;
    float: left;
    border: solid 2px #2fa362;
    padding: 5px;
    border-radius: 10px;
    transform: rotate(-1deg);
}
#orta .merkez .icerik .projeler .projebaslik {
    text-align: center;
}
#orta .merkez .icerik .projeler .projeaciklama {
    text-align: left;
    font-size: 15px;
}
/* ************************* Bir Sorum Var ************************* */
#orta .sag button {
    position: absolute;
    top: 120px;
    right: 0px;
}


/* ************************* Life V3.0 ************************* */

#orta .merkez .icerik #solust{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #AAA;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagust{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #BBB;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #solort{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #CCC;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagort{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #DDD;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #solalt{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #EEE;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagalt{
    width: 50%;
    height: auto;
    padding: 5px;
    background-color: #FFF;
    float: left;
    border-radius: 5px;
}

/**************************************************************************************/
/* ****************************************************** Çözünürlük 768 pikselin altına düştüğünde. ****************************************************** */
@media (max-width : 768px) {

#mySidenav a {
    left: -150px;
}
#mySidenav a:hover {
    left: 0;
    box-shadow: 5px 5px 2px #aaaaaa;
}

#orta .sol .sidenav .acilirmenu {
    opacity: 1;
}

#news {
    top: 60px;
    background-color: #555;
    z-index: 1;
}
#blog {
    top: 122px;
    background-color: #4CAF50;
    z-index: 1;
}
#projects {
    top: 184px;
    background-color: #f44336;
    z-index: 1;
}
#about {
    top: 246px;
    background-color: #2196F3;
    z-index: 1;
}
#contact {
    top: 308px;
    background-color: #555;
    z-index: 1;
}


.merkez .icerik .projeler {
    width: 100%;
    font-size: 15px;
}


#orta .sol {
    width: 2%;
    height: 600px;
    float: left;
}
#orta .merkez {
    width: 95%;
    height: auto;
    -webkit-box-shadow: 10px 20px 5px #aaaaaa;
    -moz-box-shadow: 10px 20px 5px #aaaaaa;
    box-shadow: 10px 20px 5px #aaaaaa;
    float: left;
    background-color: #2eb2ff;
    border-radius: 5px;
    opacity: 0.75;
    padding: 20px 20px 105px 20px;
}

#orta .merkez h2 {
    text-align: center;
    width: 100%;
    height: auto;
}

#orta .sag {
    width: 2%;
    height: 600px;
    float: left;
}
#orta .sag .sidenav a {
    left: -70px;
}

#mySidenav a:active {
    left: 0;
    box-shadow: 5px 5px 2px #aaaaaa;
}

footer {
    background-color: #092834;
    width: 100%;
    margin-top: -100px; /* altAlan yuksekliginin eksi degeri */
    height: 100px;
    clear:both;
    color: #347B98;
    opacity:0.8;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 14px;
}
footer img {
    width: 20px;
}
footer img:hover {
    width: 20px;
    opacity: 0.6;
}
footer .backtotop img {
    width: 40px;
    right: 8px;
    bottom: 35px;
    transition: 0.1s;
}

#orta .merkez .icerik #solust{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #AAA;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagust{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #BBB;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #solort{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #CCC;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagort{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #DDD;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #solalt{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #EEE;
    float: left;
    border-radius: 5px;
}
#orta .merkez .icerik #sagalt{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #FFF;
    float: left;
    border-radius: 5px;
}
}/* Düşük Çözünürlük Bitişi */

<!DOCTYPE html>
<html>
<head>
    <!-- META Etiketleri -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="tr"/>
    <meta name="description" content="Mahir Yıldızhan. Personal web site. Kişisel internet sayfası."/>
    <meta name="keywords" content="Mahir Yıldızhan, mahiryildizhan, Bir Sorum Var, ALES, ALES Soruları"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="index, follow"/>
    <meta name="author" content="Mahir Yıldızhan">
    <meta name="owner" content="Mahir Yıldızhan"/>
    <title>Mahir Yıldızhan | Haberler</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="js/func.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

var x = document.getElementById("news").getAttribute("display");
if ( x == "none") {...} else if (x == "block") {...};
$durum = 1;
$(document).ready(function(){
    $("#orta .sol .sidenav .acilirmenu").click(function(){
        if ($durum==1) {
            document.getElementById("uccizgi2").style.background ="#a2f362";
            document.getElementById("uccizgi1").style.background ="#a2f362";
            document.getElementById("uccizgi2").style.transform ="rotate(90deg)";
            document.getElementById("uccizgi3").style.display ="none";
            document.getElementById("uccizgi1").style.transform ="translateY(11px)";
            document.getElementById("news").style.left ="-15px";
            $("#mySidenav a").hide();
            $durum=0;
        } else if ($durum==0) {
            document.getElementById("uccizgi2").style.background ="black";
            document.getElementById("uccizgi1").style.background ="black";
            document.getElementById("uccizgi2").style.transform ="rotate(0deg)";
            document.getElementById("uccizgi3").style.display ="block";
            document.getElementById("uccizgi1").style.transform ="translateY(0px)";
            document.getElementById("news").style.left ="-30px";
            $("#mySidenav a").show();
            $durum=1;
        };

    });
});
</script>





</head>
<body onload="acilis()">
    <div id="top"></div>
    <div id="header">
        <a href="index.html"><img src="img/LogoG.png"></a>

    </div>
    <div id="orta">
        <div class="sol">
            <div id="mySidenav" class="sidenav">
                <div class="acilirmenu">
                    <div id="uccizgi1"></div>
                    <div id="uccizgi2"></div>
                    <div id="uccizgi3"></div>
                </div>
                <a href="haberler.html" id="news">Haberler</a>
                <a href="https://mahiryildizhancom.blogspot.com.tr/" target="_blank" id="blog">Blog</a>
                <a href="projeler.html" id="projects">Projeler</a>
                <a href="hakkimda.html" id="about">Hakkımda</a>
                <a href="iletisim.html" id="contact">İletişim</a>
            </div>
        </div>
        <div class="merkez">
            <h2><p>Anlamsız Veriden Anlamlı Bilgiye...</p></h2>
            <div class="icerik">
                <button>BASLA</button>
                <div style="background:#56aaaa;height:110px;width:80px;position:absolute;"></div>
            </div>
        </div>
        <div class="sag">
        </div>
    </div>

<footer>
    <center>Mahir Yıldızhan | <a href="mailto:mahiryildizhan.com@gmail.com">mahiryildizhan.com@gmail.com</a> 
        <p><a href="https://mahiryildizhancom.blogspot.com.tr/" target="_blank"><img src="img\Blogger.png"></a>|
        <a href="https://www.facebook.com/mahir.yildizhan" target="_blank"><img src="img\Facebook.png"></a>|
        <a href="https://github.com/m4h1r" target="_blank"><img src="img\Github.png"></a>|
        <a href="https://www.instagram.com/mhryldzhn/" target="_blank"><img src="img\Instagram.png"></a>|
        <a href="https://www.linkedin.com/in/mahiryildizhan/" target="_blank"><img src="img\Linkedin.png"></a>|
        <a href="https://stackoverflow.com/users/8455233/mahir-y%C4%B1ld%C4%B1zhan" target="_blank"><img src="img\StackOverFlow.png"></a>|
        <a href="https://twitter.com/mahiryildizhan" target="_blank"><img src="img\Twitter.png"></a>|
        <a href="https://www.youtube.com/channel/UCzSIjra8EKWS6fIJfNjTQIw" target="_blank"><img src="img\Youtube.png"></a>
    </center> <div class="backtotop"><a href="#top"><img src="img\back-to-top.png" alt="En Üste Dön"></a> v2018-05 </div>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>


<!-- Yapılacaklar Listesi 
    1-) Bir Sorum Var! listesine 5 video yükle.
    2-) Bir Sorum Var bu göresel ile güncelle.
1SorumVar
-->

Answer 1

您的脚本正在尝试访问尚未被浏览器解析的元素。 您应该将脚本放在要访问的元素下面。另外，id =＆＃34; news＆＃34;没有显示属性，甚至没有有效的html属性