zoukankan      html  css  js  c++  java
  • 使用js给页面元素添加样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome!</title>
        <script type="text/javascript" language="Javascript">
            
           addOnload(initOne);
            addOnload(initTwo);
            addOnload(initThree);
    
            function addOnload(newFunction) {
                var oldOnload = window.onload;
                
                //如果加载的类型是function则加载该oldOnload否则加载新的function 
                if (typeof oldOnload == "function") {
                    window.onload = function() {
    
                        if (oldOnload) {
                            oldOnload();
                        }
    
                        newFunction();
                    }
                }
                else {
    
                    window.onload = newFunction;
                } 
            }
    
            function initOne() {
    
                //给页面元素添加样式
                document.getElementById("pageBody").style.backgroundColor = "#ccc";
            }
    
            function initTwo() {
    
                //给页面元素添加样式
                document.getElementById("pageBody").style.color = "#FF0000";
            }
    
            function initThree() {
                var allTags = document.getElementsByTagName("*");
    
                for (var i=0; i<allTags.length; i++) {
                    if (allTags[i].nodeName == "H1") {
                        allTags[i].style.border = "5px green solid";
                        allTags[i].style.padding = "25px";
                        allTags[i].style.backgroundColor = "#FFFFFF";
                    }
                }
            }
    
        </script>
    </head>
    <body id="pageBody">
        <h1>Welcome to our Web site!</h1>
    </body>
    </html>

    作者:沐雪
    文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
    如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
    找一找教程网-随时随地学软件编程 http://www.zyiz.net/

  • 相关阅读:
    数据预处理和特征工程
    批量梯度下降,随机梯度下降,小批量梯度下降
    动态规划和贪心算法的区别
    广告计价方式:CPM,CPC,CPA
    隐语义模型LFM
    windows下安装xgboost
    KMP算法
    sklearn中的SGDClassifier
    JS变量和数据类型
    JS的基本使用 使用外部的JS文件
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2658293.html
Copyright © 2011-2022 走看看