js零散笔记03

JavaScript个人零散笔记（三）

DOM的样式编程

对于样式编程的理解就是通过JavaScript来操作页面HTML元素的样式，来改变页面的一些显示效果，例如页面的隐藏显示效果、旋转效果等

className属性

className属性可以用来读取或设置HTML元素对象的class属性。当将className属性设置为空时，代表一处所有的样式。

obj.className="style";//添加样式
obj.className=""；//移除所有样式
obj.className;//读取样式

classList对象

className属性比较简单，但如果HTML元素对象的class属性值中有多个样式类应用时，对其样式控制就不太方便，例如：

<div id="mydiv" class="style1 style2 style3"></div>

为了解决这个问题，在HTML5API中，页面DOM里的每个节点上都有一个classList对象，提供了新增、是你出、修改节点的样式类。

方法 具体描述

length	返回HTML元素对象class属性中样式类的个数
add(className)	给HTML元素对象的class属性添加一个样式类
remove(className)	从HTML元素对象的class属性中删除一个指定的样式类
toggle（className）	若HTML元素对象的class属性有指定的样式类，则执行remove操作，没有则执行add操作
contains(className)	检测HTML元素对象的class属性中是否包含指定的样式类

应用时举例：

obj.classList.lenght;//样式类长度
obj.classList.add("style1");//添加style1样式
obj.classList.contains("style1");//包含style1样式类吗
obj.classList.remove("style1");//删除style1样式类
obj.classList.toggle("style1");//有style1样式类就删除，没有就添加

style对象

使用className和classList对象已经可以很方便的修改HTML元素对象的样式，但这种方式只适合于央视的值是固定不变的，如果央视的值需要引入变量形式，则必须借助于每个HTML元素对象的上腾娱乐对象，用它来访问HTML元素对象的样式信息。
style对象包含了与每个css属性对应的属性，只是格式略有不同：

对于单个单词的css样式，以相同名字属性来表示（例如：color样式通过style.color表示）
对于两个单词的CSS样式，则是通过取出横杠，将第一个单词加上首字母大写的第二个单词（例如：background-color样式对应style.backgroundColor）
举例如下

CSS样式	style中的属性
background-color	style.backgroundColor
color	style.color
font	style.font
font-family	style.fontFamily
font-weight	style.fontWeight

使用style对象可以方便的获取HTML元素对象的style属性定义的css央视之，但它无法获取在外部定义的CSS样式。
使用style对象设置样式时，实际就是修改HTML元素对象的style属性。

浏览器私有前缀的属性的调用

对于带有浏览器私有前缀的调用跟带有两个单词的样式属性调用不一样的是，该调用方法会使第一个单词都是首字母大写，也就是每一个单词都是首字母大写，例如：

obj.style.MozUserSelect="none"；//表示的是调用css中的-moz-user-select属性