修改元素样式

对于带连字符的CSS属性，如border-color，JavaScript会将连字符删除，并用驼峰命名法重新命名。
在JavaScript中给CSS属性赋值时必须是字符串。

HTML元素.style.样式属性＝"值"

HTML元素.className＝"值"

设置元素显示或隐藏

visibility属性：规定元素是否可见。即使不可见的元素也会占据页面上的空间。其值有hidden、visible

display属性：规定元素是否可见。不可见元素不占据页面空间。其值有block、inline、none等

HTML5为所有元素都提供了hidden属性，有true和false两个属性值。设置为true浏览器将不显示该元素，也不保留该元素所占空间。可以替代CSS样式中的display属性。

获取元素尺寸

属性	描述
offsetWidth	元素在页面中占据的宽度总和，包括width、padding、border以及滚动条区域。
offsetHeight	元素在页面中占据的高度总和，包括height、padding、border以及滚动条区域。
offsetLeft	获取对象相对于版面或由 `offsetParent` 属性指定的父坐标的计算左侧位置
offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
clientWidth	元素可视部分的宽度，即width和padding之和，不包含边框和滚动条，也不包含任何可能的滚动区域。
clientHeight	元素可视部分的高度，及`heigth`和padding之和，不包括边框和滚动条，也不包含任何可能的滚动区域。
scrollWidth	当元素设置了`overflow：visble`时，元素的总宽度。默认情况下，如果该属性值大于`clientWidth`，则会显示滚动条。
scrollHeight	当元素设置了overflow：visble时，元素的总高度。默认情况下，如果该属性值大于clientHeiht，则会显示滚动条。
scrollLeft	元素左侧已经滚动的距离。设置或获取位于元素左边边界与元素中当前元素可见内容的最左端之间的距离。
scrollTop	元素顶部已经滚动的距离。设置或获取位于元素顶部边界与元素中当前元素可见内容的最顶端之间的距离。

CSS选择器

Html5引入了新的CSS选择器

document.querySelector: 根据指定的选择器规则，返回在页面中找到的第一个匹配元素

document.querySelectorAll: 根据指定的选择器规则返回页面中所有相匹配的元素，返回值类型为数组

document.getElementsByClassName:根据class名称查找所有元素，返回值类型为数组

document.querySelector(".cls1");    //返回第一个class值为cls1的元素
document.querySelectorAll(".cls1"); //返回第一个class值为cls1的元素
document.getElementsByClassName("cls1") //返回class值为cls1的所有元素