1、css中用opacity、visibility、display属性将元素隐藏的对比分析

摘自文章： 

CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析 - SegmentFault 思否

1、opacity用来设置透明度
2、display 定义建立布局时元素生成的显示框类型
3、visibility 用来设置元素是否可见。

4、opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的 

5、使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间

6、使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来

7、使用 display:none; 就不用举例子了，因为使用 display 属性的话，元素不仅看不见，而且也不占据页面空间，所有不会触发事件。

总的来说，使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的

8、visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性 如果遮挡住其他元素，其他的元素就不会触发事件了

回流

当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。
每个页面至少需要一次回流，就是在页面第一次加载的时候。

dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

是否产生重绘（repaint）

重绘

当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘

注意：回流必将引起重绘，而重绘不一定会引起回流。

2、html中cursor的属性

1. default ：默认光标，通常是一个箭头
2. auto ：默认，浏览器设置的光标
3. crosshair ：光标表示十字线
4. pointer ：光标表示指示链接的指针(一只手)
5. move： 光标表示对象可被移动
6. e-resize： 光标表示矩形框的边缘可被向右移动
7. ne-resize：光标表示矩形框的边缘可被向上及向右移动
8. nw-resize：光标表示矩形框的边缘可被向上及向左移动
9. n-resize： 光标表示矩形框的边缘可被向上移动
10. se-resize：光标表示矩形框的边缘可被向下及向右移动
11. sw-resize：光标表示矩形框的边缘可被向下及向左移动
12. s-resize： 光标表示矩形框的边缘可被向下移动
13. w-resize：光标表示矩形框的边缘可被向左移动
14. text ：光标表示文本
15. wait ：光标表示程序正忙(通常是一只表或沙漏)
16. help： 光标表示帮助(通常是一个问号)

3、 在引入的css或者js文件后面加参数的作用

使用参数有两种可能：

第一、脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。  
即代码对于文件来说 等价于                           但浏览器会认为他是 该文件的某个版本！

第二、客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新 下载新的js或css文件 ，刷性缓存的作用。大家可能有时候发现修改了样式或者js，刷新的时候不变，就是客户端缓存了css或者js文件，因此加上参数还是有好处的！

第二种情况最多，也可能两种同时存在。

版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如 20080727182553 就是精确到了生成脚本的秒，而 2.3.3 就是大版本小版本的方式。

4、原生js使用getComputedStyle方法获取css内部属性值

IE中使用的是obj.currentStyle方法，其他浏览器用的是getComputedStyle 方法 

function getStyle(element, attr) { if(element.currentStyle) {  return element.currentStyle[attr]; } else {  return getComputedStyle(element, false)[attr]; }}

如果想获得 lists 的 left 属性值，只需要：getStyle(lists,"left")

5、JS处理语言国际化的一个方法

function getParameter(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");    var r = location.search.substr(1).match(reg);    if (r!=null) return (r[2]); return null;}

以上是一个用于获取url中的查询参数的 js 方法

1) 其中的正则表达式用到了字符串拼接
        (^|&) 表示行首或者以&开头
        name 表示传进来的变量
        = 还是表示等号
        ([^&]*) 表示非&的任意个字符 (0到多个)
        (&|$) 表示以&结束或者是行尾
2) var r = location.search.substr(1).match(reg);
        location.search.substr(1) 用于获得 URL 的查询部分 (?后面的内容).
        比如地址栏中的地址是：
                r[0] = "&name=QQ&" 是整个正则表达式匹配到的内容
                r[1] = "&" 是正则表达式中第一个括号匹配到的内容,即 (^|&) 匹配到的内容
                r[2] = "QQ" 是正则表达式中第二个括号匹配到的内容,即 ([^&]*)匹配到的内容
                r[3] = "&" 是正则表达式中最后一个括号匹配到的内容即 (&|$) 匹配到的内容 

体育科学