屬性attribute和property的區別

時間 2019-12-08
標籤屬性 attribute property 區別简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
<body>

    <p id="intro">property: 指的是html 標籤自帶的屬性，好比input 的value，id這些特有的屬性，也就是說在w3c標準裏面有提到的屬性</p>
    <input id="abc" name="name123" data="data123" value="value123">
    <p>attributes:指的是html標籤上面的全部屬性，包括自定義屬性，好比：data屬性，mydata屬性，daye屬性</p>
    <h2>
        總結：
    </h2>
    <p>
        一、property和attributies都是properties的子集，而每一個attribute是attributies的子集；  
    </p>
    <p>
        二、attribute能夠理解爲特性，能夠自定義，直接在html標籤上添加的和使用setAttribute添加的狀況一致，即html標籤添加的都是attribute屬性， <br>
        property則是使用xx.屬性進行更改，一般來說，更改互相影響（value除外） 
    </p>
    <p>
        三、當添加新的非默認屬性時，是不互通的；
    </p>
    <p>
        四、一些特殊屬性，則須要特殊對待。
    </p>
    <p>
        js的setAttribute()、getAttribute()，jQ的prop()、attr()。
    </p>

</body>
<script src="http://libs.baidu.com/jquery/1.6.3/jquery.min.js"></script>
<script>
        var x=document.getElementById("abc");
        //1.1
        console.log("1.一、");
        console.log("修改前(x.value方式獲取value的值)：value="+x.value);
        console.log("修改前(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute('value'));
    
        //1.2
        console.log("1.二、");
        console.log('經過x.value="value456";方式修改value的值。');
        x.value="value456";
        console.log("修改後(x.value方式獲取value的值)：value="+x.value);
        console.log("修改後(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute("value"));
        
        //1.3
        console.log("1.三、");
        console.log('經過x.setAttribute("value","value789")方式修改value的值。');
        x.setAttribute("value","value789");
        console.log("修改後(x.value方式獲取value的值)：value="+x.value);
        console.log("修改後(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute("value"));
        console.log("**********************************************************************\n");
    
        //2.1
        console.log("2.一、");
        console.log("修改前(x.data方式獲取data的值)：data="+x.data);
        console.log("修改前(x.getAttribute('data')方式獲取data的值)：data="+x.getAttribute('data'));
    
        //2.2
        console.log("2.二、");
        console.log('經過x.data="data456";方式修改data的值。');
        x.data="data456";
        console.log("修改後(x.data方式獲取data的值)：data="+x.data);
        console.log("修改後(x.getAttribute('data')方式獲取data的值)：value="+x.getAttribute("data"));
    
        //2.3
        console.log("2.三、");
        console.log('經過x.setAttribute("data","data789")方式修改data的值。');
        x.setAttribute("data","data789");
        console.log("修改後(x.data方式獲取data的值)：data="+x.data);
        console.log("修改後(x.getAttribute('data')方式獲取data的值)：data="+x.getAttribute("data"));
        console.log("**********************************************************************\n");
    
        //3.1
        console.log("3.一、");
        console.log("修改前(x.name方式獲取name的值)：name="+x.name);
        console.log("修改前(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute('name'));
    
        //3.2
        console.log("3.二、");
        console.log('經過x.name="name456";方式修改name的值。');
        x.name="name456";
        console.log("修改後(x.name方式獲取name的值)：name="+x.name);
        console.log("修改後(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute("name"));
        
        //3.3
        console.log("3.三、");
        console.log('經過x.setAttribute("name","name789")方式修改name的值。');
        x.setAttribute("name","name789");
        console.log("修改後(x.name方式獲取name的值)：name="+x.name);
        console.log("修改後(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute("name"));
        console.log("**********************************************************************\n");
    
        //4.1 JQ
        console.log("4.一、");
        console.log("修改前($('#abc').prop('value')方式獲取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改前($('#abc').attr('value')方式獲取value的值)：value="+$("#abc").attr('value'));
        console.log("修改前(x.value方式獲取value的值)：value="+x.value);
        console.log("修改前(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute('value'));
    
        //4.2
        console.log("4.二、");
        console.log('經過$("#abc").attr("value","*value456");方式修改value的值。');
        $('#abc').attr("value","*value456");
        console.log("修改後($('#abc').prop('value')方式獲取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改後($('#abc').attr('value')方式獲取value的值)：value="+$("#abc").attr('value'));
        console.log("修改後(x.value方式獲取value的值)：value="+x.value);
        console.log("修改後(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute("value"));
    
        //4.3
        console.log("4.三、");
        console.log('經過$("#abc").prop("value","*value789");方式修改value的值。');
        $('#abc').prop("value","*value789");
        console.log("修改後($('#abc').prop('value')方式獲取value的值)：value=" + $("#abc").prop('value'));
        console.log("修改後($('#abc').attr('value')方式獲取value的值)：value="+$("#abc").attr('value'));
        console.log("修改後(x.value方式獲取value的值)：value="+x.value);
        console.log("修改後(x.getAttribute('value')方式獲取value的值)：value="+x.getAttribute("value"));
        console.log("**********************************************************************\n");
    
        //5.1
        console.log("5.一、");
        console.log("修改前($('#abc').prop('data')方式獲取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改前($('#abc').attr('data')方式獲取data的值)：data="+$("#abc").attr('data'));
        console.log("修改前(x.data方式獲取data的值)：data="+x.data);
        console.log("修改前(x.getAttribute('data')方式獲取data的值)：data="+x.getAttribute('data'));
    
        //5.2
        console.log("5.二、");
        console.log('經過$("#abc").attr("data","*data456");方式修改data的值。');
        $('#abc').attr("data","*data456");
        console.log("修改後($('#abc').prop('data')方式獲取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改後($('#abc').attr('data')方式獲取data的值)：data="+$("#abc").attr('data'));
        console.log("修改後(x.data方式獲取data的值)：data="+x.data);
        console.log("修改後(x.getAttribute('data')方式獲取data的值)：value="+x.getAttribute("data"));
    
        //5.3
        console.log("5.三、");
        console.log('經過$("#abc").prop("data","*data789");方式修改data的值。');
        $('#abc').prop("data","*data789");
        console.log("修改後($('#abc').prop('data')方式獲取data的值)：data=" + $("#abc").prop('data'));
        console.log("修改後($('#abc').attr('data')方式獲取data的值)：data="+$("#abc").attr('data'));
        console.log("修改後(x.data方式獲取data的值)：data="+x.data);
        console.log("修改後(x.getAttribute('data')方式獲取data的值)：value="+x.getAttribute("data"));
        console.log("**********************************************************************\n");
    
        //6.1
        console.log("6.一、");
        console.log("修改前($('#abc').prop('name')方式獲取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改前($('#abc').attr('name')方式獲取name的值)：name="+$("#abc").attr('name'));
        console.log("修改前(x.name方式獲取name的值)：name="+x.name);
        console.log("修改前(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute('name'));
    
        //6.2
        console.log("6.二、");
        console.log('經過$("#abc").attr("name","*name456");方式修改name的值。');
        $('#abc').attr("name","*name456");
        console.log("修改後($('#abc').prop('name')方式獲取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改後($('#abc').attr('name')方式獲取name的值)：name="+$("#abc").attr('name'));
        console.log("修改後(x.name方式獲取name的值)：name="+x.name);
        console.log("修改後(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute("name"));
    
        //6.3
        console.log("6.三、");
        console.log('經過$("#abc").prop("name","*name789");方式修改name的值。');
        $('#abc').prop("name","*name789");
        console.log("修改後($('#abc').prop('name')方式獲取name的值)：name=" + $("#abc").prop('name'));
        console.log("修改後($('#abc').attr('name')方式獲取name的值)：name="+$("#abc").attr('name'));
        console.log("修改後(x.name方式獲取name的值)：name="+x.name);
        console.log("修改後(x.getAttribute('name')方式獲取name的值)：name="+x.getAttribute("name"));
        console.log("**********************************************************************\n");
    
        
    </script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。