JS——操作CSS样式

页面往往是动态变化的，我们经常需要在脚本里对元素的样式进行操作，刚学习js的时候大家都知道通过style属性设置css样式相关的属性，但有时候也想先获取样式，结果发现通过style取到的值是空，这就需要我们对这些概念足够熟练。

一、访问行内样式：

css样式包括三种：
外部样式、内部样式、行内样式。

这个style对象包含通过HTML的style属性设置的所有CSS样式信息，但不包含祥式表中的样式。因此，使用元素的syle属性只能访间行内样式，不能访问样式表的样式信息。
style对象可以通过cssText属性返回行内样式的字符串表示。字符串中去掉了包围属性和值的花括号，以及元素选择器名称。
除了csText属性外,style对象还包含每一个与css属性-映射的脚本属性)。

含有连字符的多词属性(如font-family)在JavaScript中会删除这些连字符，以驼峰命名法重新命名CSS的脚本属性名称(如fontFamily)。
例子： 对于border-right-color属性来说，在脚本中应该使用/borderRightColor,
所以下面页面脚
本中的用法都是错误的。

代码如下：

<div id="box" >盒子</div>
<scrip>
var box = document. getElementById("box");
box.style.border-right-color= "red";
box.style,border-right-style = "solid";
</script>

针对上面页面脚本，可以修改为:

<script>
Varb dcuent gelemenBnld"borx
box.style. brderRighColor = "red";
box. style brderRighsyle -“olid';
</script>

提示:使用CSS脚本属性时，应该注意几个问题:
1.由于float是js保留字，禁止使用，英雌使用cssFloat表示float属性的脚本名称
2.在js中，所有CSS属性值都是字符串，必须加上应该好，以表示字符串数据类型
3.在脚本中可以动态设置属性值，但最终赋值给属性的值是字符串

二、使用style:

DOM样式规范给style对象动议了一些属性和方法。具体如下：
1.cssText:访问HTML标签中style属性的CSS代码
2.lengh:元素定义CSS属性的数量
3.partentRule:表示CSS的CSSRule对象
4.getPropertyCSSValue（）:返回包含给定属性值的CSSValue对象
5.getPropertyPriority（）:返回给指定CSS属性是否附加了！important命令
6.item():返回给定位置的CSS的名称
7.getPropertyValue():返回给定属性的字符串值
8.removeProperty():从样式中删除
9.setProperty():给定属性设置相应的值，优先权标志

1.使用getPropertyValue()方法：
作用：能够获取指定元素样式属性的值
语法如下：

var value=e.style.getPropertyValue(properName)

properName表示CSS属性值名称，不是脚本属性名，对于复合名应该使用连字符进行连接
例子：使用getPropertyValue()获取行内width值，代码如下;

<script>
    window.onload=function(){
        var box=document.getElementById('box');
        var width=box.style.getPropertyValue('width');
        box.innerHTML='盒子宽度'+width;
    }
</script>
<div id="box" style="width: 300px;height: 200px;border: solid 1px red;"></div>

或者可以用以下代码：

<script>
    window.onload=function(){
        var box=document.getElementById('box');
        var width=box.style.width;
        box.innerHTML='盒子宽度'+width;
    }
</script>
<div id="box" style="width: 300px;height: 200px;border: solid 1px red;"></div>

效果图如下：

2.使用setProperty()方法：
作用：能够指定元素是指样式
语法如下：

var value=e.style.setProperty(properName，value,priority)

properName表示CSS属性值名称
value对应值包含单位
priority表示是否设置优先级命令

例子：使用setProperty()方法定义盒子显示宽度和高度，代码如下;

<script>
window.onload=function(){
    var box=document.getElementById('box');
    box.style.setProperty('width','400px','');
    box.style.setProperty('height','200px','');
}
</script>
<div id="box" sytle='border: solid 1px red;'>盒子</div>

或者以下代码：

<script>
window.onload=function(){
    var box=document.getElementById('box');
    box.style.width='400px';
    box.style.height='200px';
}
</script>
<div id="box" sytle='border: solid 1px red;'>盒子</div>

3.使用item()方法:
作用：指定索引位置CSS属性名称：
语法：

var value=e.style.item(index)

4.使用removeProperty():方法:
作用：指定从样式中删除
语法：

var value=e.style.removeProperty(Name)

5.4.使用getPropertyPriority（）方法:
作用：:返回给指定CSS属性是否附加了！important优先级命令
语法：

var value=e.style.getPropertyPriority（）

例子：设置盒子动态效果。代码如下：

<script>
    window.onload=function(){
        var box=document.getElementById('box');
        box.onmouseover=function(){
            box.style.setProperty('background-color','blue')
            box.style.setProperty('border','solid 50px red')
        }
        box.onclick=function(){
            box.innerHTML(box.style.item(0)+':'+box.style.getPropertyValue('width'));
            box.innerHTML=box.innerHTML+'<br/>'+(box.style.item(1)+":"+box.style.getPropertyValue('height'));
        }
        box.onmouseout=function(){
            box.style.setProperty('background-color','red');
            box.style.setProperty('border','solid 50px blue');
        }

    }
</script>
<div id="box" style="width: 100px;height: 100px;background-color: red;border: solid 50px blue;"></div>

或者一下代码：

效果图如下：

三、使用 styleSheets：

cssstyleSheets表示样式表，包括< link>标签包含的外部样式和< style>标签包含的内部样式。用document可以访问样式表。

兼容主流浏览器方法，代码如下;

var CSSRule=document.styleSheets[0].CSSRule || document.styleSheets[0].rules;

例子：
代码如下

<style>


        #box{
            width:400px;
            height: 200px;
            background-color:red ;
            border: solid 1px blue;
        }
</style>
<script>
    window.onload=function(){
        var box=document.getElementById('box')
        var CSSRule=document.styleSheets[0].CSSRule || document.styleSheets[0].rules;
        box.innerHTML='<h3>盒子样式</h3>'
        box.innerHTML+='<br>边框：'+CSSRule[0].style.border;
        box.innerHTML+='<br>背景：'+CSSRule[0].style.backgroundColor;
        box.innerHTML+='<br>高度：'+CSSRule[0].style.height;
        box.innerHTML+='<br>宽度：'+CSSRule[0].style.width;
    }
</script>
<div id="box"></div>

效果图样式如下：

四、修改样式：

cssRules的style独享不仅可以访问属性，还可以设置属性。
例子：
代码如下：

<div id="box"></div>

<style>
        #box{
            color: green ;
        }
        .red{color: red;}
        .blue{color: blue;}

</style>
<script>
    window.onload=function(){
        var CSSRule=document.styleSheets[0].CSSRule || document.styleSheets[0].rules;
        CSSRule[2].style.color='#999'
    }
</script>
<p class="blue">原字体为蓝色，现在显示为浅灰色</p>

效果样式图如下(比较):

五、读取媒体查询

使用 window.matchMedia() 方法可以访问 CSS 的 Media Query 语句。window.matchMedia() 方法接收一个 mediaQuery 语句的字符串作为参数，返回一个 MediaQueryList 对象。该对象有以下两种属性：
media：返回所查询的 mediaQuery 语句字符串。
matches：返回一个布尔值，表示当前环境是否匹配查询语句。

代码如下：

var result = window.matchMedia('(min-width: 600px)');
result.media // (min-width: 600px)
result.matches // true

执行不同的 JavaScript 代码

var result = window.matchMedia('(max-width: 700px)');
if (result.matches) {
    console.log('页面宽度小于等于700px');
} else {
    console.log('页面宽度小于700px');
}

使用 CSS 事件

transitionEnd 事件
CSS 的过渡效果（transition）结束后，触发 transitionEnd 事件
例如：

el.addEventListener ('transitionend', 'onTransitionEnd', false);
functioin onTransitionEnd () {
    console.log('Transition end');
}

transitionEnd 的事件对象具有以下属性：

propertyName：发生 transition 效果的 CSS 属性名。
elapsedTime：transition 熬过持续的秒数，不含 transition-delay 的时间。
pseudoElement：如果 transition 效果发生在伪元素上，会返回该伪元素的名称，以“::”开头。如果没有发生在伪元素上，则返回一个空字符串。

使用 transitionend 事件时，可能需要添加浏览器前缀。

el.addEventListener ('webkitTransitionEnd', function () {
    el.style.transition = 'none';
});
animationstart、animationend、animationiteration 事件

CSS 动画有以下 3 个事件：
animationstart 事件：动画开始时触发。
animationend 事件：动画结束时触发。
animationiteration 事件：开始新一轮动画循环时触发。如果 animation-iteration-count 属性等于 1，该事件不触发，即只播放一轮 CSS 动画，不会触发 animationiteration 事件。

例子：这 3 个事件的事件对象，都有 animationName 属性（返回产生过渡效果的 CSS 属性名）和 elapsedTime 属性（动画已经运行的秒数）。对于 animationstart 事件，elapsedTime 属性等于 0，除非 animation-delay 属性等于负值

var el = document.getElementById("animation");
el.addEventListener("animationstart", listener, false);
el.addEventListener("animationend", listener, false);
el.addEventListener("animationiteration", listener,false);
function listener (e) {
    var li = document.createElement("li");
    switch (e.type) {
        case "animationstart" :
            li.innerHTML = "Started : elapsed time is" + e.elapsedTime;
            break;
        case "animationend" :
            li.innerHTML = "Ended: elapsed time is" + e.elapsedTime;
            break;
        case "animationiteration" :
            li.innerHTML = "New loop started at time" + e.elapsedTime;
            break;
    }
    document.getElementById("output").appendChild(li);
}