JS浏览器端

DOM 操作 CSS

1 内联样式的操作
DOM 操作某样式属性的写法规范：
CSS 样式属性 DOM 写法
background-color node.style.backgroundColor
color node.style.color
font node.style.font
font-family node.style.fontFamily
对于浏览器兼容性写法如下：
node.style.webkitTransform = ""; 比较重要常见
node.style.MozTransform = "";
node.style.msTransform = "";
node.style.OTransform = "";
node.style.transform = "";

2 样式表的操作
获取样式表的代码如下：
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
注 :IE 浏览器是 rules 集合，而遵循 DOM 规范的浏览器是使用的 cssRules 。

3 获取最终样式
3.1 在IE浏览器下获取最终样式
var divEle = document.getElementById("divId");
var backgroundColor = divEle.currentStyle.backgroundColor;
3.2 在遵守 DOM 规范的浏览器下获取最终样式
var divEle = document.getElementById("divId");
var backgroundColor = document.defaultView.getComputedStyle(divEle, null).backgroundColor;
// 当然也可以这样写
//window.getComputedStyle(divEle, null);// 显然这样更方便，因为 window 可以不写

DOM 事件

1 a标签点击事件
<a href="https://www.baidu.com"> 百度 </a>
点击该 a 标签，该页面可以跳转至百度首页，在整个过程中，通过鼠标点击 a 标签，来触发 a 标签上默认的点击事件，从而发生跳转动作。

2 表单提交事件
如有代码如下：
<form action="https://www.baidu.com">
<input type="submit" value="submit" />
</form>
点击 submit 按钮，该页面就也会跳转至百度首页，在整个过程中，通过鼠标点击 submit 按钮，来触发 form 表单内 submit 按钮的默认事件，从而发生跳转
动作。