【JavaScript】学习笔记_脚本化CSS

1.CSS的实装方式：

    1-1.给每个单独的HTML元素设置style属性：

        <p style = 'margin:20px; vorder:solid red 2px;'></p>

    1-2.放在样式表之中：

        <style>

            p {

                text-indent: .5in;

            }

        </style>

    1-3.将样式表放置到外部文件：

        <link rel = 'stylesheet' href = 'mystyle.css' type = 'text/css'>

2.文档中元素的样式是由各个来源的CSS样式层叠的结果:

    优先级依次递增，以下各种样式的层叠计算结果就是该元素的计算样式：

        Web浏览器的默认样式

        文档的样式表

        每个独立HTML元素的style属性

3.复合属性：

    同一类别的属性可以统一在一起赋值成为复合属性：

    如：font:bold italic 24px helvetica

4.非标准属性:

    浏览器厂商实现非标准CSS属性的时候会在属性名称前面加上一个厂商前缀：

    如：-moz-（Firefox），-webkit-（Chrome），-ms-（IE）

5.CSS定位元素：

    position：定位类型

        static：按常规文档流布局，不能使用CSS定位技术（default）

        absolute：相对于祖先元素或者文档本身

        fixed：相对于浏览器窗口

        relative：相对于常规文档流中的一个元素定位

    top：上边缘位置

    left：左边缘位置

    bottom：下边缘位置

    right：右边缘位置

    z-index：元素的前后相对位置

        默认为0

        可以为正负值

        只对兄弟元素设置堆叠效果

    text-shadow：阴影效果

    border：边框：（因为CSS盒模型不常用）

    margin：元素外边框与其他元素外边框之间的留白：（因为CSS盒模型不常用）

    padding：元素内边框线与元素之间的留白：（因为CSS盒模型不常用）

    CSS盒模型：

    visibility：设置为hidden则不显示，有布局

    display：设置为none则不显示，无布局

    color：颜色

    background-color：背景颜色/背景图像

    background-image：使用的图像

    background-attachment，background-position，background-repeat：背景细节

    overflow：属性指定内容超出元素大小时候的显示方式

        visible：溢出显示

        hidden：裁剪隐藏掉超出部分

        scroll：一直显示滚动条

        auto：溢出发生时显示滚动条

    clip：元素裁剪区域

        如：style = "clip : rect( auto, 100px, auto, auto)"

6.脚本化内联样式（javascript代码之中的CSS属性）：

    6-1.CSSStyleDeclaration对象（属性名）：

        style属性并不是字符串，而是一个CSSStyleDeclaration对象，在javascript代码之中，有些CSS属性名中的【-】会被认为是减号，所以CSSStyleDeclaration属性名的格式应该是移除连字符，将连字符后面的紧接着的字母大写。

        如：font-size（CSSStyleDeclaration对象） → fontSize（字符串对象）

    6-2.属性值：

        要将值放在引号中，也就是属性值要设置为字符串。

    6-3.将元素的样式属性封装成对象：

        e.setAttribute("style", s);

        e.style.cssText = s;

    6-4.查询元素的内联样式：

        s = e.getAttribute( "style" );

        s = e.style.cssText;

    6-5.CSS动画：

        通过【setTimeout】【setInterval】函数来实现。

7.计算样式：

    通过【getComputedStyle】来获得一个元素的计算样式，返回一个CSSStyleDeclaration对象，代表应用在指定对象上的所有样式。

    特性：

        只读性

        计算样式的值为绝对值

        不计算复合属性（没有margin，只有marginLeft和marginTop等等）

        未定义cssText属性

8.脚本化CSS类：

    实现方式：

        将一套CSS样式封装成一个类，并且赋予Class名称。

            .attention{

                background-color : yellow;

                fond-weight : bold;

                border : solid black 2px;

            }

        之后在function之中可以设定指定元素的类Class名称为封装的类名称，这个指定元素就具备了那一套CSS样式（也可以填入空值来删除指定的CSS样式）。

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

    多类名元素：

        HTML元素可以有多个CSS类名，定义的属性为classList（在HTML5之中定义），属性值为DOMTokenList对象，具备实时性，并不是一个静态快照：

            add：添加一个类名

            remove：删除一个类名

            toggle：不存在就添加一个类名，否则删除

            contains：检测是否包含一个指定的类名

9.脚本化样式表：

    样式表本身在javascript脚本中属于CSSStyleSheet对象，可以通过操作这个对象来操作样式表：

    开启和关闭样式表（使用CSSStyleSheet对象的disable属性）：

        如：function disableStyleSheet( ss ){

                    if( typeof ss === "number" )

                        docment.styleSheets[ss].disable = true;

                    else{

                        var sheets = docment.querySelectorAll( ss );

                        for( var i = 0; i < sheets.length; i++ )

                            sheets[ i ].disable = true;

                    }

                }

    查询，插入，删除样式表规则：

        由于直接操作样式表通常无意义，因为让样式表保持静态对于元素的className编程更好，故而略。

    创建新的样式表：

        docment.createStyleSheet