JS中数字正射影像图元素的属性与财产属性示例详解

一、'表亲戚：属性和财产

为什么称属性和财产为'表亲戚'呢？因为他们既有共同处，也有不同点。

属性是数字正射影像图元素在文档中作为超文本标记语言标签拥有的属性；

财产是数字正射影像图元素在射流研究…中作为对象拥有的属性。

从定义上可以看出：

对于超文本标记语言的标准属性来说，属性和财产是同步的，是会自动更新的但是对于自定义的属性来说，他们是不同步的。(自定义属性不会自动添加到财产)财产的值可以改变；属性的值不能改变二、两者输出形式

1、分别打印两个值

打印属性属性

//html div class=' div class ' id=' DiVid '/div//jswindow。onload=function(){ var divId=document。getelementbyid(' DiVId ')；控制台。日志(DiVid。属性)；}

可以看见属性对应的值，我们打印一下：

控制台。日志(DiVid。属性[0])；//打印class=' DivClass '控制台。日志(DivID。属性。类)//打印class=' DivClass '控制台。日志(Divid。GetAttribute(' class ')//打印div类控制台。日志(Divid。GetAttribute(' id ')//打印divId发现上面两组值是相等的。

虽然都可以取值，但《js高级程序设计》 中提到，为了方便操作，建议大家用setAttribute()和getAttribute()来操作即可。

打印财产

超文本标记语言自带的数字正射影像图属性会自动转换成财产，但是自定义的属性没有这个'权利'

直接把差异标签当作对象，用'.'输出即是财产属性

但是注意！财产是不能输出自定义属性的

div class=' div class ' id=' Divid ' AddUserDefine=' zidingyi '/div控制台。日志(DiVid。类)；//打印div类控制台。日志(Divid。AddUserDefine)//打印未定义

打开元素的性能可以看到唐存在的属性，财产同样继承了，而添加用户定义却没有出现在财产中

property:

var obj={ }；对象。definepreproperty(obj，' name '，{ value : ' Property ' })控制台。日志。名称)//打印财产三、用例子解析两者赋值

如果我们修改了财产的值

//html输入值=' init value ' id=' ipt '///jswindow。onload=function(){ var ipt=document。getelementbyid(' ipt ')；ipt。值=“更改值”控制台。日志。值)；控制台。日志。GetAttribute(' value ')；}猜一下结果？

答案是：

控制台。日志。值)；//ChangeValueConsole。日志。GetAttribute(' value ')；//initValue我们再来看看投入的值

难以置信？

我们再来看看从修改属性入手

//html输入值=' init value ' id=' ipt '///jswindow。onload=function(){ var ipt=document。getelementbyid(' ipt ')；ipt.setAttribute('value '，' ChangeVaLue ')控制台。日志。值)；控制台。日志。GetAttribute(' value ')；}输出：

控制台。日志。值)；//ChangeValueConsole。日志。GetAttribute(' value ')；//更改值总结如下：

财产比"属性"霸道，估计是'表哥财产和属性两者是属于单方面通信，即：1 .财产能够从属性中得到同步；

2 .属性不会同步财产上的值；

再啰嗦一句：

对属性财产可以赋任何类型的值，而对特性属性只能赋值字符串！

//jsvar obj={ value : false，} var ipt=document。getelementbyid(' ipt ')；obj.value=true//属性更改ipt.setAttribute('value '，true)//属性更改控制台。日志(对象的类型。值)；//布尔控制台。日志。值)//true console。日志(ipt的类型。value)//字符串控制台。日志。值)；//真小结

分析了这么多，对财产和属性的区别理解也更深了，在这里总结一下：

创建

数字正射影像图对象初始化时会在创建默认的基本财产；只有在超文本标记语言标签中定义的属性才会被保存在财产的属性属性中；属性会初始化财产中的同名属性，但自定义的属性不会出现在财产中；属性的值都是字符串；数据绑定

属性的数据会同步到属性，但是属性的改变不会改变属性；对于值、类等属性/特性，数据绑定的方向是单向的，属性-属性；对于id，数据绑定是双向的，attribute=property；对于disabled，当disabled on属性为false时，disabled on属性必须共存，数据绑定可以认为是双向的；使用

可以使用DOM的setAttribute方法改变属性；同时；直接访问Attributes上的值会得到一个attr对象，而通过getAttribute方法访问会直接得到Attribute的值；大多数情况下(除非有浏览器兼容性问题)，jQuery.attr是通过setAttribute实现的，而jQuery.prop直接访问属性；DOM对象的；摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。