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 按钮的默认事件,从而发生跳转
动作。