前端css+jquery+javascript知识点积累（待续）

http://bingye07.blog.163.com/blog/#m=0  这个博客很多前端的~

1、访问伪元素里的content属性值
<span style="font-size:18px;">// Get the color value of .element:before
var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');</span>

2、CSS鼠标指针事件 ：点击这个元素，你会发现任何你放置在这个元素上的监听器都不会触发任何事件。
<span style="font-size:18px;">.disabled { pointer-events: none; }</span>

3、CSS3圆角边框：
-moz-border-radius: 5px; //firefox
-webkit-border-radius:5px; //webkit
border-radius: 5px; //ie9+
如果支持低版本的ie，可以去jquery.org社区通过插件实现，或者用css2的圆角背景图，网上有种方法用javascript（curvycorners.js）在页面加载的时候对ie进行设置
  调用方法非常简单,首先我们要去官网下载这个插件
        官网下载地址: http://curvycorners.googlecode.com/files/curvycorners-2.1.zip
 

    它的应用场景是这样的，假设我们现在有一个长方形的DIV，那么我们只要引入curvycorners.js，
  like this：
            <scripttype="text/JavaScript"src="../curvycorners.src.js"></script>
      <scripttype="text/JavaScript">
            curvyCorners.addEvent(window, 'load',initCorners);  //触发事件，调用initCorners方法
                        function initCorners(){
                var settings ={             //圆角设置
                    tl: { radius: 20},      //左上圆角半径
                    tr: { radius: 20},      //右上圆角半径
                    bl: { radius: 20},      //左下圆角半径
                    br: { radius: 20},      //右下圆角半径
                    antiAlias:true          //圆角部分的状态 true：完美圆角false：失真圆角
                 }
              curvyCorners(settings, "#myBox");//操作对象为id="myBox"的DIV
      </script>
                基本的调用就是这样，下面我们说一下多种调用方式
           我们可以使用
                  var divObj =document.getElementByIdx_x("myDiv");
    curvyCorners(settings,divObj);
                      或者直接
                              curvyCorners(settings,'#myDiv');   
            如果是class="myDiv",我们可以这样调用       
                              curvyCorners(settings,'.myDiv');
                      这样我们就可以将圆角应用在多个地方，另外还有一种方法：
                              curvyCorners(settings,#myDiv1,.cl1,.cl2,.cl3);
            然后，我们发现这一句是在加载方法
                            curvyCorners.addEvent(window, 'load',initCorners);
            同样，我们也可以使用jQuery代替它，使DOM树加载完之后就出现效果，而不是window.onload
                              $(document).ready(function(){
                   initCorners();
                })  //注意不要忘了引入jQuery.js
          这个js插件确实不错，连背景图也能生成圆角
    优点：对于非IE的适合CSS3的样式border-radius(或者-moz-border-radius、-webkit-border-radius)直接应用css，ie的通过js处理

4、CSS兼容浏览器

.demo {-moz-width:980px;width:900px;*width:1000px} /*这个对你的2个要求都做了处理。默认是900px，IE6显示1000，FF显示980*/
注意：建议将firefox写在最前面，其他默认的现在中间，最后写ie6（ie6识别*x和_x的属性，其他的浏览器不识别）

5、表格内容自动换行

table {
table-layout: fixed;
word-wrap:break-word;（word-break:break-all这个会将英文单词截成两半，看布局而决定要不要）
}
div {
word-wrap:break-word;
}

5、层或者窗口居中（兼容多个浏览器）

function CalcShowModalDialogLocation(dialogWidth, dialogHeight) {
        var iWidth = dialogWidth;
        var iHeight = dialogHeight;
        var iTop = (window.screen.availHeight - 20 - iHeight) / 2;
        var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        return 'dialogWidth:' + iWidth + 'px;dialogHeight:' + iHeight + 'px;dialogTop: ' + iTop + 'px; dialogLeft: ' + iLeft +     'px;center:yes;scroll:yes;status:yes;resizable:0;location:yes';
 }