javascript_DOM 编程艺术学习笔记(七)
一、元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var para = document.getElementById("example");
alert(typeof para.nodeName);
alert(typeof para.style);
alert(para.style.color);
alert(para.style.fontSize)
alert(para.style.fontFamily);
}
</script>
</head>
<body>
<p id="example" style="font-size:1em;color:#999999;font-family:'Arial',sans-serif;">
An Example of a paragraph
</p>
</body>
</html>
1、获取元素的样式
element.style
2、获取元素的颜色
element.style.color
3、获取元素的文字大小
样式是font-size,但是javascript不能这样写,会认为是减号,必须要用驼峰式写法。因此获取的方式是:element.style.fontSize,其他的类似的也是这种写法。
4、设置元素的样式:
如:设置元素的颜色,右边的值都是字符串,必须要用引号,单引号和双引号都行。
element.style.color = "red"
5、这种通过style获取样式的方法,只能用于内嵌样式,也就是说放在标签内部的样式。如果通过样式表,或者放在<head>标签之中都不能获取。
二、获取元素相邻的节点
1、获取下一个元素节点
/**
* 获取元素节点
* @param {[element]} node [元素节点]
* @return {[element]} [元素节点]
*/
function getNextElement (node) {
if(node.nodeType == 1){ // nodeType等于1,表示是元素节点
return node;
}
if(node.nextSibling){ // 确定有下一个节点
return getNextElement(node.nextSibling);
}
return null;
}