资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

区分元素特性attribute和对象属性property

定义

十多年的罗源网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整罗源建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“罗源网站设计”,“罗源网站推广”以来，每个客户项目都认真落实执行。

元素特性attribute是指HTML元素标签的特性

下面的id、class、title、a都是特性，其中a叫做自定义特性

对象属性property是指元素节点的属性

下面的id、title、b都是属性，其中b叫做自定义属性

区分元素特性attribute和对象属性property

区分元素特性attribute和对象属性property

 

共有

id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变

【1】修改元素特性(以title为例)

区分元素特性attribute和对象属性property

测试内容

区分元素特性attribute和对象属性property

【2】修改对象属性

区分元素特性attribute和对象属性property

测试内容

区分元素特性attribute和对象属性property

例外

class和for这两个元素特性是例外，因为class和for是保留字，无法直接在对象属性中使用。所以在对象属性中，class变成了className，而for变成了htmlFor

【1】class

区分元素特性attribute和对象属性property

测试内容

区分元素特性attribute和对象属性property

【2】for

区分元素特性attribute和对象属性property

区分元素特性attribute和对象属性property

 

特殊

style和onclick是两个特殊的特性，它们虽然有对应的属性名，但属性值与通过getAttribute()返回的值并不相同

【1】style

通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个CSSStyleDeclaration对象

区分元素特性attribute和对象属性property

区分元素特性attribute和对象属性property

【2】onclick

如果通过getAttribute()访问，会返回相应代码的字符串。而访问onclick属性时，会返回一个javascript函数

[注意]其他事件处理程序也类似

区分元素特性attribute和对象属性property

测试内容

区分元素特性attribute和对象属性property

[注意]如果通过对象属性设置onclick属性，则不会有对应的元素特性

区分元素特性attribute和对象属性property

测试内容

区分元素特性attribute和对象属性property

 

自定义

【1】自定义特性

自定义特性用来在HTML元素上绑定一些额外的信息。但是自定义特性无法在对象属性中有所体现

HTML5新增了数据集属性dataset(规范的自定义特性)，用于存储页面或应用程序的私有定制数据。数据集属性以'data-'为前缀，可以使用javascript中对象属性dataset访问data-*的值

由于元素特性的值以'-'做间隔，在对象属性中将转换为首字母大写的形式

data-index-one -> dataset.indexOne

所以，元素特性的值一定不要出现大写，否则对象属性会解释出错

[注意]IE10-浏览器不支持dataset

区分元素特性attribute和对象属性property

区分元素特性attribute和对象属性property

【兼容代码】

区分元素特性attribute和对象属性property

function getDataSet(element){    if(element.dataset){        return element.dataset;
    }    var attrs= element.attributes;    var len = attrs.length;    var data = {};    for(var i=0;i
区分元素特性attribute和对象属性property
【2】自定义属性
自定义属性在javascript中非常常用，是一种常用的编程技术。但元素特性上并不会有所体现
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
[注意]可以使用数据集属性的逆向操作来实现自定义属性向元素特性的对应 
 
混淆
IE7-浏览器下会混淆元素特性attribute和对象属性property。在下列情况下，IE7-浏览器通过getAttribute()返回的值与对象属性相同
【1】class
设置对象属性className，在IE7-浏览器下，访问元素特性时，参数也设置为className才有效
[注意]for也有类似效果，不再赘述
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
【2】style
IE7-浏览器通过getAttribute()方法返回的元素特性与对象属性一样，都是CSSStyleDeclaration对象
[注意]click等事件处理程序也有类似效果，不再赘述
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
【3】自定义
在IE8-浏览器下，自定义特性会自动对应为对象属性，自定义属性也会自动对应为元素特性
区分元素特性attribute和对象属性property
区分元素特性attribute和对象属性property
 
总结
对象节点对于HTML标签元素说来，是元素DOM化的结果。与此相对应，对象属性也是元素特性的DOM化结果
由于javascript中保留字的限制，存在class和for这两种例外情况
与普通的元素特性不同，通过style实现的脚本化CSS机制和通过onclick等实现的事件处理机制是DOM的两大功能，它们被DOM实现为对象，而不仅仅是普通的字符串
自定义特性和自定义属性非常有用，但却没有对应关系。HTML5新增的数据集属性dataset建立了两者的联系
最后，IE7-浏览器对元素特性和对象属性有所混淆。如果网站仍然需要兼容IE7-浏览器，就要非常小心
            
            
                        

            名称栏目：区分元素特性attribute和对象属性property            

            标题路径：http://cdkjz.cn/article/jehdcd.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
业务热线：400-028-6601 / 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    泸州网站建设重庆网站制作温江网站制作成都宣传海报域名申请成都装修公司雅安服务器托管微信服务号订阅号开发成都微信二次开发成都木托盘                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图