JavaScript HTML DOM xiuno建站日记

已认证 修罗大仙 3月前 988

改变 HTML 输出流

document.write()
<script>
document.write(Date());
</script>

查找HTML元素

document.getElementById() //返回对拥有指定 id 的第一个对象的引用。

document.getElementsByTagName() //返回带有指定标签名的对象集合。

document.getElementsByClassName() //返回文档中所有指定类名的元素集合,作为 NodeList 对象。

document.getElementsByName() //返回带有指定名称的对象集合

改变 HTML 内容

document.getElementById(id).innerHTML=新的 HTML
<p id="p1">Hello World!</p
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

改变 HTML 属性

document.getElementById(id).attribute=新属性
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
特别例子
<h2 class="ceshi">未替换前!</h2>
<script>
	function changehtm(elements,content) {
		var len=elements.length;
	    for(var i=0;i<len;i++){
		elements[i].innerHTML=content
	                          }
	}
var ceshis =document.getElementsByClassName("ceshi");
changehtm(ceshis,"测试成功")
</script>

   

改变 HTML样式css

document.getElementById(id).style.property=新样式
<p id="p1">Hello World!</p> 
<p id="p2">Hello World!</p> 
<script> 
    document.getElementById("p2").style.color="blue"; 
    document.getElementById("p2").style.fontFamily="Arial"; 
    document.getElementById("p2").style.fontSize="larger"; 
</script>
特别例子1
<h2 class="ceshi">未替换前是黑色!</h2>
<script>
	function changecss(elements,propertyvalue) {
		var len=elements.length;
	    for(var i=0;i<len;i++){
		elements[i].style.color=propertyvalue;
	}
	}
var ceshis =document.getElementsByClassName("ceshi");
 changecss(ceshis,"red")
</script>

   

特别例子2(改变多个HTML样式)
<h2 class="ceshi">未替换前是黑色!</h2>
<p>P标签可以改变颜色</p>
<script>
	function changecss(elements,cssname,cssvalue) {
		var len=elements.length;
	    for(var i=0;i<len;i++){
        elements[i].style[cssname]=cssvalue;
	}
	}
var ceshis =document.getElementsByClassName("ceshi");
 changecss(ceshis,"background","green");
var p1 =document.getElementsByTagName("p");
 changecss(p1,"color","blue");
</script>

   

<body id="content" onload="changecss()" >
<div id="box" onclick="changebox()">点我</div>
<hr>
<div id="box" onmouseout="changebox()">鼠标离开</div>
<hr>
<div id="box" onmouseover="changebox()">鼠标移上</div>
<hr>
<div>加载完毕改变背景色,似乎是只对body有效</div>
	
<script>
function changebox(){
	alert("I love you~");
}
var contents=document.getElementById("content")
function changecss(){
	  contents.style.background="green"; 
}
</script>
</body>



打赏记录:该主题共收到 0笔打赏。

用户 时间 经验 金币 人民币
最新回复 (0)
返回
首页
插件
搜索