Javascript 在旋转facebook、twitter和youtube图标图像时出现问题_Javascript_Jquery_Rotation_Transform

Javascript 在旋转facebook、twitter和youtube图标图像时出现问题

javascript jquery

Javascript 在旋转facebook、twitter和youtube图标图像时出现问题,javascript,jquery,rotation,transform,Javascript,Jquery,Rotation,Transform,我正在为我的朋友开发一个网站来提高我的技能，但是……我在通过javascript旋转社交媒体图标方面遇到了问题。我在javascript控制台中得到一个错误，说“UncaughtTypeError:无法读取null的属性'style'。我做错了什么下面是以下HTML和javascript代码 index.html------------------------------------------ <!DOCTYPE html> <html lang="en-us">

我正在为我的朋友开发一个网站来提高我的技能，但是……我在通过javascript旋转社交媒体图标方面遇到了问题。我在javascript控制台中得到一个错误，说“UncaughtTypeError:无法读取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>

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);

可能的原因可能是您在早期运行脚本，甚至在页面完全加载之前。出现错误的原因是，

document.getElementById（el）

行找不到指定的元素，因此它返回

null

，当您访问

null

的

style

时，它抛出错误

尝试将js放在页面的末尾

其次，您在

elem.style.Tranform=degs

中有一个拼写错误，它的

elem.style.transform=degs

。另外，在指定特定于浏览器的样式时需要小心，例如

webkitTransform

，

mozTransform

等

更正后，它将对您正常工作：

演示：

JS:

唉……我真是个白痴哈哈，我早该知道的。有趣的是，我在博客上读到，其中提到javascript开发人员如何在底部加载脚本；更不用说，每当我检查站点的源代码时，我都会注意到他们将脚本标记放在底部。谢谢你的帮助。

    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);