Javascript 在创建文本元素并给定类后轻松输入文本_Javascript_Jquery_Html_Css

Javascript 在创建文本元素并给定类后轻松输入文本

javascript jquery html css

Javascript 在创建文本元素并给定类后轻松输入文本,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好吧，我正在努力让这件事开始运作。基本上，当我现在加载只是为了测试的时候，我会在以后的页面中使用一个按钮，我希望它向现有的节点div1添加一个“p”元素。然后我想向我刚刚创建的“p”元素添加一个类。基本上，我的目标是简化使用提供的样式类创建的文本。问题是，它并没有缓和下来，它只是立即出现。我卡住了，我能做什么 <!doctype html> <html> <style> #div1 p { opacity: 0;

好吧，我正在努力让这件事开始运作。基本上，当我现在加载只是为了测试的时候，我会在以后的页面中使用一个按钮，我希望它向现有的节点div1添加一个“p”元素。然后我想向我刚刚创建的“p”元素添加一个类。基本上，我的目标是简化使用提供的样式类创建的文本。问题是，它并没有缓和下来，它只是立即出现。我卡住了，我能做什么

<!doctype html>
<html>
    <style>
    #div1 p {
        opacity: 0;
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
        -webkit-transition: opacity 2s ease-in;
        -moz-transition: opacity 2s ease-in;
        -o-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
        transition: opacity 2s ease-in;
    }
    #div1 p.load {
        opacity: 1;
    }
    </style>

    <head>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
    </head>

    <body onload="js()">
    <div id="div1">
    </div>
    </body>

    <script>
    function js(){
        // Construct new p element with text
        var newElem = document.createElement("p");
        var newElemText = document.createTextNode("Evan is the man!");
        newElem.appendChild(newElemText);

        // Add the p element to existing node, div1
        var element = document.getElementById("div1");
        element.appendChild(newElem);

        // Add class to new p element inside node div1
        $($("#div1 p")).addClass("load");
    }
    </script>
</html>

您的代码有几个错误：

<!doctype html>
<html>
    <head>
        <style>
            #div1 p {
                opacity: 0;
                margin-top: 25px;
                font-size: 21px;
                text-align: center;
                -webkit-transition: opacity 2s ease-in;
                -moz-transition: opacity 2s ease-in;
                -o-transition: opacity 2s ease-in;
                -ms-transition: opacity 2s ease-in;
                transition: opacity 2s ease-in;
            }
            #div1 p.load {
                opacity: 1;
            }
        </style>
    </head>
    <body onload="js()">
        <div id="div1">
        </div>
    </body>
    <script>
        function js(){
            // Construct new p element with text
            var newElem = document.createElement("p");
            var newElemText = document.createTextNode("Evan is the man!");
            newElem.appendChild(newElemText);

            // Add the p element to existing node, div1
            var element = document.getElementById("div1");
            element.appendChild(newElem);
            // Add class to new p element inside node div1
            setTimeout(function(){
               newElem.className += " load";
            },0);
        }
    </script>
</html>

您的第一个必须在标签中

$$div1 p，仅包装一次

将.addClass放入setTimeout中

考虑使用newElem.className+=load删除对jQuery的依赖关系；而不是$div1 p.addClassload

据我所知，您需要使用javascript在页面加载时淡出元素，css3转换更多用于页面加载后的dom事件。可能尝试@keyframes，但您可能会遇到遗留浏览器问题。

如果他使用jquery，那么无论如何都必须使用javascript调用动画，为什么不直接使用$'div1 p'.fadeIn2000；或者，如果你想提高效率，就制作动画。这就是他想要做的。使用CSS3进行转换。setTimeout效率不高。你为什么这么想？从这个意义上说，它更像是黑客加上你正在使用javascript调用动画，为什么不使用已经加载的库呢。在这个场景中不会有任何可测量的性能差异。他的解决方案很好。只有少数几个容易漏掉的小错误。