HTML对象：html一些对象属性的介绍

程序员文章站 2022-03-20 16:29:26

...

这篇文章给大家分享的内容是关于HTML对象：html一些对象属性的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Form 对象

Form 对象方法

reset() ：把表单的所有输入元素重置为它们的默认值。

submit() ：提交表单。

Text 对象

Text 对象属性

disabled ：设置或返回文本域是否应被禁用。

readOnly ：设置或返回文本域是否应是只读的。

value ：设置或返回文本域的 value 属性的值。

Text 对象方法

focus() :在文本域上设置焦点。

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input name = "wd" />
            <input type="submit" value="百度一下" onclick="sub()">
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            var text = document.getElementsByName("wd")[0];
            text.focus();
            function sub(){
                var text = document.getElementsByName("wd")[0];
//              text.value = "魔道";
//              text.readOnly = "true";
//              console.log(text.readOnly);
//              text.disabled = "true";
                console.log(text.disabled);
                text.focus();
            }
            //type为text、password、textarea的标签均有value、focus、disabled、readOnly
        </script>
    </body>
</html>

Radio 对象

Radio 对象属性

checked ：设置或返回单选按钮的状态。

disabled ：设置或返回是否禁用单选按钮。

value ：设置或返回单选按钮的 value 属性的值。

Checkbox 对象

Checkbox 对象属性

checked ：设置或返回 checkbox 是否应被选中。

disabled ：设置或返回 checkbox 是否应被禁用。

value ：设置或返回 checkbox 的 value 属性的值

Select 对象

Select 对象集合

options[] ：返回包含下拉列表中的所有选项的一个数组。

Select 对象属性

disabled ：设置或返回是否应禁用下拉列表。

length ：返回下拉列表中的选项数目。

selectedIndex ：设置或返回下拉列表中被选项目的索引号。

Select 对象方法

add() ：向下拉列表添加一个选项。

remove() ：从下拉列表中删除一个选项。

Option 对象

Option 对象构造方法

Option(text,value) ：通过text和value值创建Option对象

Option 对象属性

selected ：设置或返回 selected 属性的值。

text ：设置或返回某个选项的纯文本值。

value ：设置或返回被送往服务器的值。

Select对象及Option对象示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option  value="1">一年级</option>
            <option  value="2">二年级</option>
            <option  value="3">三年级</option>
            <option  value="4">四年级</option>
        </select>
        <input type="button" onclick="text()" value="按钮" />
        <script type="text/javascript">
            function text(){
                var select = document.getElementById("grade");
                console.log(select.disabled);
                console.log(select.length);
                console.log(select.selectedIndex);

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")

                var options = select.options;
                console.log(options[select.selectedIndex].value);

                console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")

                for(var i=0;i<options.length;i++){
                    console.log(options[i].value);
                    console.log(options[i].selected);
                    console.log(options[i].text);
                }

                var option = new Option("五年级","5");
                select.add(option);
                select.remove(0);
            }   
        </script>
    </body>
</html>

注册表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="color:red;" id="wrong-massage"></span><br />
        <form onsubmit="return check()">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input id="name"  placeholder="请输入用户名" onblur="check_name()" ></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input id="pw" type="password" placeholder="请输入密码" onblur="check_pw()"></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input id="pw-check" type="password" placeholder="请输入确认密码"/></td>
                </tr>
            </table>
            <input type="radio" name="sex" value="0"/>男
            <input type="radio" name="sex" value="1"/>女
            <br />
            <input type="checkbox" name="hobby" value="0"/>羽毛球
            <input type="checkbox" name="hobby" value="1"/>篮球
            <input type="checkbox" name="hobby" value="2"/>乒乓球
            <input type="checkbox" name="hobby" value="3"/>足球
            <br />
            <select id="grade">
                <option value="1">大一</option>
                <option value="2">大二</option>
                <option value="3">大三</option>
                <option value="4">大四</option>
            </select>
            <br />
            <td><input type="reset" value="重置" /></td>
            <td><input type="submit" value="注册"/></td>
        </form>
        <script>
            //使用$()函数可节省代码量
            function $(id){
                return document.getElementById(id);
            }

            function check(){
                var n = document.getElementById("name");
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");
                var c = document.getElementById("pw-check");

                if(n.value.length>12){
                    msg.innerHTML = "用户名不能超过15个字符，请重新输入！";
                    n.focus();
                    return false;
                }
                if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空，请重新输入！";
                    n.focus();
                    return false;
                }
                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符，请重新输入！";
                    w.focus();
                    return false;
                }
                if(w.value.length==0){
                    msg.innerHTML = "密码不能为空，请重新输入！";
                    w.focus();
                    return false;
                }
                if(w.value!=c.value){
                    msg.innerHTML = "密码错误，请重新输入！";
                    c.focus();
                    return false;
                }

                var sex = document.getElementsByName("sex");
                var hobby = document.getElementsByName("hobby");
                for(var i=0;i<sex.length;i++){
                    sex[i].disabled=true;
                    console.log(sex[i].checked+" "+sex[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")

                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = true;
                    console.log(hobby[i].checked+" "+hobby[i].value);
                }

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")


                var select = document.getElementById("grade");
                var options = select.options;
                console.log(select.length);
                console.log(select.selectedIndex);
                console.log(options[select.selectedIndex].value);
                for(var i=0;i<options.length;i++){
                    var option = options[i];
                    console.log(option.value)
                    select.disabled = true;
                }
                return false;
            }

            function check_name(){
                var n = document.getElementById("name");
                var msg = document.getElementById("wrong-massage");

                if(n.value.length>12){
                    msg.innerHTML = "用户名不能超过15个字符，请重新输入！";
                    n.value = "";
                    n.focus();
                }
                else if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空，请重新输入！";
                    n.focus();
                }
                else{
                    msg.innerHTML = " ";
                }
            }
            function check_pw(){
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");

                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符，请重新输入！";
                    w.value = "";
                    w.focus();
                }
                else if(w.value.length==0){
                    msg.innerHTML = "密码不匹配，请重新输入！";
                    w.focus();
                }
                else
                {
                    msg.innerHTML = " ";
                }
            }
        </script>
    </body>
</html>

Image 对象

Image 对象属性

src：设置或返回图像的 URL。

HTML对象：html一些对象属性的介绍

介绍一些适用于 Web 开发者的 Atom 编辑器插件_html/css_WEB-ITnose

JS获取对象的某个CSS属性值的问题_html/css_WEB-ITnose

HTML中position的属性值介绍

有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题

HTML5的自定义属性data-*详细介绍和JS操作实例

HTML5中的autofocus（自动聚焦）属性介绍

HTML5的download属性详细介绍和使用实例

HTML5通过调用canvas对象的getContext()方法来获取绘图环境

HTML5 Video标签的属性、方法和事件汇总介绍

深入解析HTML5中的Blob对象的使用