Question

我正在网站上为我的朋友提高我的技能，但是....我...我通过javascript旋转社交媒体图标有问题。我在javascript控制台中收到错误说＆＃34; Uncaught TypeError：无法读取属性＆＃39; style＆＃39; of null＆＃34;。我做错了什么？

以下是HTML和javascript代码。

index.html ------------------------------------------

<!DOCTYPE html>
<html lang="en-us">

    <head>
        <script src="js/icon_app.js"></script>
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/ranks.css">
        <link rel="icon" href="Resources/The_Seven_Nobles_icon.ico">
        <meta charset="utf-8">
        <title>The Seven Nobles | Kingdom RP-PVP Guild on WoW PTR | RP-Community</title>
    </head>

    <body>
        <div id="body-container">
            <header id="container-header">
                <div id="header-left">
<a href="index.html" class="homepage_pic">
<img src="Resources/tsn_header2.jpg" alt="tsn_header2 picture">
</a>

                </div>
                <div id="header-right2">
                    <img src="Resources/Social-Network-Facebook-icon.png" alt="icon" width="40" height="40" id="facebook-social-media-icons" />
                    <img src="Resources/social-twitter-box-blue-icon.png" alt="icon" width="40" height="40" id="twitter-social-media-icons" />
                    <img src="Resources/youtube-icon.jpg" alt="icon" width="40" height="40" id="youtube-social-media-icons">
                    <p>Click and visit us</p>
                </div>
            </header>
            <nav id="headerNav">
                <ul id="top-navBar">
                    <li class="home"><a href="#"> </a>
                    </li>
                    <li><a href="#">Lore </a>
                    </li>
                    <li><a href="#">Ranks </a>
                    </li>
                    <li><a href="#">Quiz</a>
                    </li>
                    <li><a href="#">Support</a>
                    </li>
                </ul>
            </nav>
            <div id="main-content">
                <div id="content-summary">
                    <section id="getStarted">

<h4 class="header-topics0">Get started</h4>

                        <p>Welcome to our guild website. Before you join the guild on the World of Warcraft Public Test Realm, please make sure to read about the Guild lore, and take the online challenge quiz to test your knowledge of our guild. Go fourth and venture a new world Little Nobles! GO GO GO!</p>
                    </section>
                    <section id="goal-accessment">

<h4 class="header-topics1">Goal Accessments</h4>

                        <p>Welcome to our guild website. Before you join the guild on the World of Warcraft Public Test Realm, please make sure to read about the Guild lore, and take the online challenge quiz to test your knowledge of our guild. Go fourth and venture a new world Little Nobles! GO GO GO!</p>
                    </section>
                    <section id="contribute-now">

<h4 class="header-topics2">Contribute Now</h4>

                        <p>Welcome to our guild website. Before you join the guild on the World of Warcraft Public Test Realm, please make sure to read about the Guild lore, and take the online challenge quiz to test your knowledge of our guild. Go fourth and venture a new world Little Nobles! GO GO GO!</p>
                    </section>
                </div>
                <div id="content-summary-below">
                    <section id="guild-founders">
                        <p id="founders-name">THE TSN PROJECT IS FOUNDED BY</p>
<span>Joseph Bourne & Kurobank</span>

                        <p id="founders-quote">Productive Front-End Web Technology</p>
<a id="get-started-button" href="#">Get Started</a>

                        <p id="copyright-letter">Copyright TSN, is a trademark of TSN, Inc.
<a href="#" target="_blank">View License</a>

                        </p>
                    </section>
                </div>
                <footer id="footer-content">
                    <ul id="support-list">
                        <li class="list-header"><a href="#">Support</a>
                        </li>
                        <li><a href="#">Support Articles</a>
                        </li>
                        <li><a href="#">Parental Controls</a>
                        </li>
                        <li><a href="#">Help! I got hacked!</a>
                        </li>
                    </ul>
                    <ul id="developer-list">
                        <li class="list-header"><a href="#">Developers</a>
                        </li>
                        <li><a href="#">API</li>
<li><a href="#">Source Code</a>
                        </li>
                        <li><a href="#">Development</a>
                        </li>
                        <li><a href="#">Development Team</a>
                        </li>
                    </ul>
                    <ul id="career-list">
                        <li class="list-header"><a href="#">Career</a>
                        </li>
                        <li><a href="#">Work at TSN</a>
                        </li>
                        <li><a href="#">Search for job</a>
                        </li>
                        <li><a href="#">Open Position</a>
                        </li>
                        <li><a href="#">Jobs FAQ</a>
                        </li>
                        <li><a href="#">University Relations</a>
                        </li>
                    </ul>
                </footer>
            </div>
        </div>
    </body>

</html>

icon_app.js -------------------------------------------- ----

function rotateNow(el, degs) {
    var elem = document.getElementById(el);
    elem.style.Tranform = degs;
}

var myVar1 = setInterval(rotateNow("facebook-social-media-icons", "rotate(70deg)"), 1000);
var myVar2 = setInterval(rotateNow("twitter-social-media-icons", "rotate(20deg)"), 1000);
var myVar3 = setInterval(rotateNow("youtube-social-media-icons", "rotate(90deg)"), 1000);

Answer 1

可能的原因可能是您提前运行脚本，甚至在页面完全加载之前。出错的原因是，行document.getElementById(el)无法找到指定的元素，因此返回null，当您访问style的{{1}}时，会抛出错误。

尝试将js放在页面的末尾。

其次，null，elem.style.Tranform = degs有拼写错误。此外，您需要注意指定浏览器特定的样式，即elem.style.transform = degs，webkitTransform等。

更正后，它会对你有用：

演示： http://jsfiddle.net/lotusgodkk/GCu2D/168/

JS：

mozTransform

有问题旋转facebook，twitter和youtube图标图像

1 个答案: