第十四章 校本化CSS

font-weight:bold

margin-left:1%; /*左外边距是页面宽度的1%*/
text-indent:1px; /*1像素的缩进*/
font-size:12px; /*字体尺寸为12px*/

        <p style="margin:20px;border:2px red solid;">
            samll letter
        </p>

font:blod italic 24px helvetica

.radius10{
border-radius:10px; /*征对现代浏览器*/
-moz-border-radius:10px; /*征对firefox 3.x*/
-webkit-border-radius:10px; /*征对safari 3.2和4*/
}

        <div style="box-sizing:border-box;width: 50%;padding: 10px;border: 2px solid red;"></div>

<div style="width: calc(50%-12px);padding:10px;border: solid red 2px;"></div><!--请注意表达式方式-->

            opacity:.75
            filter:alpha(opacity=75);

rect(top right bottom left)

        style="clip:rect(0px 100px 100px 0);"
        style = "clip:rect(auto 100px auto auto);"

            var e = document.getElementById("bb");
            e.style.fontSize = "24px";
            e.style.fontWeight = "bold";
            e.style.color = "#007F9F";
             //<div id="bb">校本化内联样式</div>
             //<div id="bb" style="font-size: 24px; font-weight: bold; color: rgb(0, 127, 159);">校本化内联样式</div>

position:absolute;font-family: sans-serif;background-color:#FFFFFF;

            e.style.position = "absolute";
            e.style.fontFamily = "sans-serif";
            e.style.backgroundColor = "#FFFFFF";

            e.style.left = "300px";

                e.style.left = (x0 + left_margin + left_border + left_padding) + "px";

                e.style.margin = topMargin + "px" + rightMargin + "px" + bootomMargin + "px" + leftMargin + "px";

                e.style.marginTop = topMargin + "px";
                e.style.marginRight = rightMargin + "px";
                ...

             //两者都可以设置e的样式属性为字符串s
            e.setAttribute("style", s);
            s = e.style.cssText;
             //两者都可以查询元素的内联样式
            s = e.getAttribute("style");
            s = e.style.cssText;

             //将e转化为相对定位的元素，使之左右“震动”
             //第一个参数可以是圆度对象或者元素的id
             //如果第二个参数是函数，以e为参数，将在动画结束时调用
             //第四个参数指定震动多久，默认500毫秒
            function shake(e, oncomplete, distance, time) {
                    //句柄参数
                    if (typeof e === "string") e = document.getElementById(e);
                    if (!time) time = 500;
                    if (!distance) distance = 5;
                    
                    var originalStyle = e.style.cssText; //保存e的原始style
                    e.style.position = "relative"; //使e相对定位
                    var start = (new Date()).getTime(); //注意，动画的开始时间
                    animate(); //动画开始
                    //函数检查消耗时间，并更新e的位置
                    //如果动画完成，它将e还原为原始状态
                    //否则，更新e的位置，安排它自身从新运行
                    function animate() {
                        var now = (new Date()).getTime(); //得到当前时间
                        var elapsed = now - start; //从开始以来消耗了多长时间
                        //是总时间的几分之几
                        var fraction = elapsed / time;
                        if (fraction < 1) { //如果动画未完成
                            //作为动画完成的比例函数，计算e的x位置
                            //使用正弦函数将完成的比例乘以4pi
                            //所以，它来回往复两次
                            var x = distance * Math.sin(fraction * 4 * Math.PI);
                            e.style.left = x + "px";
                            //在25毫秒之后或在总时间最后尝试再次运行函数
                            //目的是为了产生每秒40帧的动画
                            setTimeout(animate, Math.min(25, time - elapsed));
                        } else { //否则动画完成
                            e.style.cssText = originalStyle //恢复原始样式
                            if (oncomplete) oncomplete(e); //调用完成后回调函数
                        }
                    }
                }
                //以毫秒级时间将e从完全不透明到透明
                //在调用函数时假设e是完全不透明的
                //oncomplate是一个可选函数，以e为参数，在动画结束调用
                //如果不指定time.默认500
                //本函数ie中不能正常构造
                //除了opacity，ie使用非标准的filter属性
                function fadeOut(e,oncomplete,time){
                    if(typeof e === "string") e = document.getElementById(e);
                    if(!time) time =500;
                    
                    //使用Math.sqrt作为一个简单的缓动函数来创建动画
                    //精巧的非线性：一开始淡的比较快，然后慢一些
                    var ease = Math.sqrt;
                    
                    var start = (new Date()).getTime(); //注意动画开始的实际
                    animate();//动画开始
                    
                    function animate(){
                        var elapsed = (new Date()).getTime() - start ;//消耗时间
                         //总时间的几分之几
                        var fraction = elapsed/time;
                        if(fraction < 1){//动画未完成
                            var opacity = 1 - ease(fraction);//计算元素不透明
                            e.style.opacity =String(opacity); //设置在e上
                            setTimeout(animate,Math.min(25,time-elapsed));
                        }
                        else{
                            e.style.opacity = "0";
                            if(oncomplete) oncomplete(e); //调用完成后回调函数
                        }
                    }
                }

 <button onclick="shake(this,fadeOut)">点击我</button>

    .fadeable{transition:opacity .5s ease-in}

            .attention{/*吸引用户注意*/
                background-color:yellow;
                font-weight: bold;
                border: solid black 2px;
            }

            function grabAttention(e){e.className = "attention";}
            function releaseAttention(e) {e.className = "";}

             /***classList()：将className当做一个CSS类集合***/
            /**
             *如果e有classList属性则返回它。否则，模拟一个为e模型DOMTokenList API对象
             * 返回的对象有contains(),add(),remove(),toggle()和toString()等方法
             * 来检测和修改元素e的类集合，如果classList属性是原生支持的
             * 返回的类数组对象有length和数组索引属性。模拟的DOMTOkenList不是类数组对象
             * 但是它有一个toArray()方法来返回一个含元素类名的一个纯数组快照
             **/
            function classList(e) {
                    if (e.classList) return e.classList; //如果e.classList存在，则返回它
                    else return new CSSClassList(e); //否则就伪造一个
                }
            
            //CSSSlassList是一个模拟DOMTokenList的javascript类
            function CSSClassList(e) {this.e = e;}
            
            //如果e.className包含类名c，则返回true,否则返回false
            CSSClassList.prototype.contains = function(c) {
                //检测c是否为合法的类名
                if (c.length === 0 || c.indexOf(" ") != -1)
                    throw new Error("Invalid calss name:‘" + c + "‘");
                //首先是常规检查
                var classes = this.e.className;
                if (!classes) return false; //不含类名
                if (classes === c) return true; //e有一个完全匹配的类名
                //否则，把c自身看做一个单词，利用正则表达式搜索c
                // \b在正则表达式里代表单词的边界
                return classes.search("\\b" + c + "\\b") != -1;
            };
             //如果c不存在，将c添加到e.className中
            CSSClassList.prototype.add = function(c) {
                if (this.contains(c)) return; //如果存在，什么都不做
                var classes = this.e.className;
                if (classes && classes[classes.length - 1] != " ")
                    c = " " + c; //如果需要，添加一个空格
                this.e.className += c; //将c添加到className中
            };
             //将在e.className中出现的c都删除
            CSSClassList.prototype.remove = function(c) {
                //检查c是否是合法的类名
                if (c.length === 0 || c.indexOf(" ") != -1)
                    throw new Error("Invalid class name:" + c + "‘");
                //将所有作为单词的c和多余的尾随空格全部删除
                var pattern = new RegExp("\\b" + c + "\\b\\s*", "g");
                this.e.className = this.e.className.replace(pattern, "");
            };
             //如果c不存在，将c添加到e.className中，并返回true
             //否则，将在e.className中出现所有的c都删除，并返回false
            CSSClassList.prototype.toggle = function(c) {
                if (this.contains(c)) { //如果e.className包含c
                    this.remove(c); //删除它
                    return false;
                } else {
                    this.add(c); //添加它
                    return true;
                }
            };
             //返回 e.className本身
            CSSClassList.prototype.toString = function() {
                return this.e.className;
            };
             //返回在e.className中的类名
            CSSClassList.prototype.toArray = function() {
                return this.e.className.match(/\b\w+\b/g) || [];
            };