通过ID获取元素
document.getElementById("id")
获取的元素是一个对象，如想对元素进行操作，要使用它的属性或方法。
注意:
以上script代码最好放在包含“id”的html代码后面，否则获得的元素为null。
获得元素对象后，可使用以下方法：
1.innerHTML 属性
Object.innerHTML
innerHTML 属性用于获取或替换 HTML 元素的内容。
注意:
1)Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2)注意书写，innerHTML区分大小写。
2.改变 HTML 样式
Object.style.property=new style
示例：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
3.显示和隐藏
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
Object.style.display=value
value的值可以为none或者block或者inline.
4.控制类名（className 属性
className 属性设置或返回元素的class 属性,为网页内的某个元素指定一个css样式来更改该元素的外观。
object.className = classname
JavaScript代码在网页中放置位置的影响
同样的代码oTab = document.getElementById("tabs")，若存放于网页开头的<head>中，则oTab的值为null，若存放于网页<body>的末尾位置，则oTab就能够获取到id为tabs的元素。原因是整个html网页按顺序加载，先加载<head>中的内容，因此此时存放在<head>中的javascript代码先执行，但是获取不到元素。
一个解决办法是将<head>中的javascript代码整体放入window.onload事件中。onload 事件会在页面或图像加载完成后立即发生。
网友评论