readonly、disabled、display、visible的区别

css样式设置中有几个功能相同但表现形式却略有差异的属性，今天在通过js更改对象的样式属性的时候就发现display和visible这两个貌似相同，其实还是有些区别的，这里顺便也把看到的readonly和disabled的区别也分享一下。

display和visible的区别：

（1）首先说明的是display:none和visible:hidden都能够实现将网页上某个元素隐藏起来。

（2）如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。

（3）使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。

（4）如果是通过样式文件或方式来设置元素的display:none样式，用js设置style.display=”“并不能使元素显示，可以使用block或inline等值来代替。通过style=”display:none”直接在元素上进行的设置不会有这个问题。

（5）将元素设置为display:none将不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。而将元素设置为visibility:hidden则仅使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

Readonly和Disabled的区别：

&#