旋转 facebook、twitter 和 youtube 图标图像时遇到问题答案

【问题标题】：Having issues rotating facebook, twitter, and youtube icon images旋转 facebook、twitter 和 youtube 图标图像时遇到问题
【发布时间】：2014-06-12 12:54:58
【问题描述】：

我正在为我的朋友开发网站以提高我的技能，但是....我在通过 javascript 旋转社交媒体图标时遇到问题。我在 javascript 控制台中收到一条错误消息，提示“未捕获的 TypeError：无法读取 null 的属性 'style'”。我做错了什么？

以下是 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);

【问题讨论】：

标签： javascript jquery rotation transform

【解决方案1】：

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

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

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

更正后，它会为您正常工作：

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

JS：

    function rotateNow(el, degs) {
    var elem = document.getElementById(el);
    elem.style.WebkitTransform = degs;
    elem.style.MozTransform = degs;
    elem.style.transform = degs;
    elem.style.OTransform = degs;
    elem.style.msTransform = degs;
}

setInterval(function () {
    rotateNow("facebook-social-media-icons", "rotate(70deg)");
    rotateNow("twitter-social-media-icons", "rotate(20deg)");
    rotateNow("youtube-social-media-icons", "rotate(90deg)")
}, 1000);

【讨论】：

叹息.....我真是个白痴哈哈，我应该知道这一点。有趣的部分是我在博客上阅读，它提到了 javascript 开发人员如何在底部加载他们的脚本；更不用说，每当我检查网站的源代码时，我注意到他们把脚本标签放在底部。感谢您的帮助。