溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html一些對(duì)象屬性的介紹

發(fā)布時(shí)間：2020-05-07 13:44:50 來源：億速云 閱讀：421 作者：Leah 欄目：web開發(fā)

今天小編給大家分享的是html一些對(duì)象屬性的詳細(xì)介紹，相信很多人都不太了解，為了讓大家更加了解html一些對(duì)象屬性，所以給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

Form 對(duì)象

Form 對(duì)象方法

reset() ：把表單的所有輸入元素重置為它們的默認(rèn)值。

submit() ：提交表單。

Text 對(duì)象

Text 對(duì)象屬性

disabled ：設(shè)置或返回文本域是否應(yīng)被禁用。

readOnly ：設(shè)置或返回文本域是否應(yīng)是只讀的。

value ：設(shè)置或返回文本域的 value 屬性的值。

Text 對(duì)象方法

focus() :在文本域上設(shè)置焦點(diǎn)。

示例

<!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的標(biāo)簽均有value、focus、disabled、readOnly
        </script>
    </body>
</html>

Radio 對(duì)象

Radio 對(duì)象屬性

checked ：設(shè)置或返回單選按鈕的狀態(tài)。

disabled ：設(shè)置或返回是否禁用單選按鈕。

value ：設(shè)置或返回單選按鈕的 value 屬性的值。

Checkbox 對(duì)象

Checkbox 對(duì)象屬性

checked ：設(shè)置或返回 checkbox 是否應(yīng)被選中。

disabled ：設(shè)置或返回 checkbox 是否應(yīng)被禁用。

value  ：設(shè)置或返回 checkbox 的 value 屬性的值

Select 對(duì)象

Select 對(duì)象集合

options[] ：返回包含下拉列表中的所有選項(xiàng)的一個(gè)數(shù)組。

Select 對(duì)象屬性

disabled ：設(shè)置或返回是否應(yīng)禁用下拉列表。

length ：返回下拉列表中的選項(xiàng)數(shù)目。

selectedIndex ：設(shè)置或返回下拉列表中被選項(xiàng)目的索引號(hào)。

Select 對(duì)象方法

add() ：向下拉列表添加一個(gè)選項(xiàng)。

remove() ：從下拉列表中刪除一個(gè)選項(xiàng)。

Option 對(duì)象

Option 對(duì)象構(gòu)造方法

Option(text,value) ：通過text和value值創(chuàng)建Option對(duì)象

Option 對(duì)象屬性

selected ：設(shè)置或返回 selected 屬性的值。

text ：設(shè)置或返回某個(gè)選項(xiàng)的純文本值。

value ：設(shè)置或返回被送往服務(wù)器的值。

Select對(duì)象及Option對(duì)象示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option  value="1">一年級(jí)</option>
            <option  value="2">二年級(jí)</option>
            <option  value="3">三年級(jí)</option>
            <option  value="4">四年級(jí)</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("五年級(jí)","5");
                select.add(option);
                select.remove(0);
            }   
        </script>
    </body>
</html>

注冊(cè)表

<!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="請(qǐng)輸入用戶名" onblur="check_name()" ></td>
                </tr>
                <tr>
                    <td>密碼：</td>
                    <td><input id="pw" type="password" placeholder="請(qǐng)輸入密碼" onblur="check_pw()"></td>
                </tr>
                <tr>
                    <td>確認(rèn)密碼：</td>
                    <td><input id="pw-check" type="password" placeholder="請(qǐng)輸入確認(rèn)密碼"/></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="注冊(cè)"/></td>
        </form>
        <script>
            //使用$()函數(shù)可節(jié)省代碼量
            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個(gè)字符，請(qǐng)重新輸入！";
                    n.focus();
                    return false;
                }
                if(n.value.length==0){
                    msg.innerHTML = "用戶名不能為空，請(qǐng)重新輸入！";
                    n.focus();
                    return false;
                }
                if(w.value.length>12){
                    msg.innerHTML = "密碼不能超過12個(gè)字符，請(qǐng)重新輸入！";
                    w.focus();
                    return false;
                }
                if(w.value.length==0){
                    msg.innerHTML = "密碼不能為空，請(qǐng)重新輸入！";
                    w.focus();
                    return false;
                }
                if(w.value!=c.value){
                    msg.innerHTML = "密碼錯(cuò)誤，請(qǐng)重新輸入！";
                    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個(gè)字符，請(qǐng)重新輸入！";
                    n.value = "";
                    n.focus();
                }
                else if(n.value.length==0){
                    msg.innerHTML = "用戶名不能為空，請(qǐng)重新輸入！";
                    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個(gè)字符，請(qǐng)重新輸入！";
                    w.value = "";
                    w.focus();
                }
                else if(w.value.length==0){
                    msg.innerHTML = "密碼不匹配，請(qǐng)重新輸入！";
                    w.focus();
                }
                else
                {
                    msg.innerHTML = " ";
                }
            }
        </script>
    </body>
</html>

Image 對(duì)象

Image 對(duì)象屬性

src：設(shè)置或返回圖像的 URL。

以上就是html一些對(duì)象屬性的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手