• javascript学习实录 之九(选择样式,改变文字效果) 刘小小尘


    直接上代码:

    当你选择一个样式的时候,对应的地方,会改变,这会很有用的

    代码很简单,欢迎指教

    <!DOCTYPE html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title></title>
        <style type="text/css">
            #cssid {
                height: 100px;
                 300px;
                background-color: #FFCC00;
            }
            #textid {
                background-color: #CCCCCC;
                 300px;
            }
        </style>
        <script type="text/javascript">
            function change() {
                var selNode = document.getElementById("selid");
                var value = selNode.options[selNode.selectedIndex].value;
    
                var didNode1 = document.getElementById("cssid");
                var divNode2 = document.getElementById("textid");
                didNode1.style.textTransform = value;
                divNode2.innerHTML = "text-transform : "+ value + ";";
            }
        </script>
    </head>
    <body>
        <div id="cssid">
            good good study day day up!!!
        </div>
        <p>
        </p>
        <select id="selid" onchange="change()">
            <option value="none">--text-transform--</option>
            <option value="capitalize">首字母大写</option>
            <option value="uppercase">所有字母大写</option>
            <option value="lowercase">所有字母小写</option>
        </select>
        <div id="textid">
            text-transform : none;
        </div>
    </body>
    </html>


  • 相关阅读:
    Beta冲刺<10/10>
    Beta冲刺<1/10>
    多语言工作者--凡事预则立
    Beta阶段代码与规范
    多语言工作者の十日冲刺<9/10>
    团队进行Alpha冲刺--项目测试
    团队进行Alpha冲刺--冲刺总结
    Alpha总结展望——前事不忘后事之师
    Beta冲刺随笔——Day_Five
    Beta冲刺随笔——Day_Two
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3074857.html
Copyright © 2020-2023  润新知