asp.net代码练习 work052 Javascript操作HTML元素的示例

最新推荐文章于 2024-09-08 14:19:46 发布

虾米大王

最新推荐文章于 2024-09-08 14:19:46 发布

阅读量199

点赞数

分类专栏： asp.net c#

本文链接：https://blog.csdn.net/modern358/article/details/117405271

版权

c# 同时被 2 个专栏收录

284 篇文章 0 订阅

订阅专栏

asp.net

258 篇文章 2 订阅

订阅专栏

htmlpage1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Javascript操作HTML元素的示例</title>
    <script>
        function setUserName()
        {
            var userName = document.getElementById("userName");
            userName.value = "虾米大王";
        }

        function setUrl()
        {
            var url = document.getElementById("url");
            url.value = "https://blog.csdn.net/modern358";
        }

        function setAge()
        {
            var age = document.getElementById("age");
            age.length = 0;
            for (var i = 1; i < 100; i++)
            {
                age.options.add( new Option(i+ "岁",i));
            }
        }

        function setSex()
        {
            var sex = document.getElementById("sex");
            var content = "<input type='radio' value='1' name='sexGroup' id='nan' checked='checked'>男";
            content += "<input type='radio' value='0' name='sexGroup' id='nv'>女";
            sex.innerHTML = content;
        }

    </script>
</head>
<body>
    <form action="">
        <table>
            <tr>
                <td>姓名</td>
                <td>
                    <input id="userName" type="text" name="userName" />
                </td>
            </tr>
            <tr>
                <td>网址</td>
                <td>
                    <input id="url" type="text" name="url" />
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>
                    <select id="age">
                        
                    </select>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <div id="sex"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="Button1" type="button" value="初始化姓名" onclick="javascript: setUserName();" /><br />
                    <input id="Button2" type="button" value="初始化网址" onclick="javascript: setUrl();" />
                </td>
                <td>
                    <input id="Button3" type="button" value="初始化年龄" onclick="javascript: setAge();" /><br />
                    <input id="Button4" type="button" value="初始化性别" onclick="javascript: setSex();" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>