js常见操作

来源：互联网发布：免费java教程入门视频编辑：程序博客网时间：2024/04/30 08:44

1、如何改变 HTML 元素的内容 (innerHTML)

<!DOCTYPE html><html><head></head><body><p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p><button id="myBtn">点击这里</button><script>document.getElementById("myBtn").onclick=function(){displayDate()};function displayDate(){document.getElementById("demo").innerHTML=Date();}</script><p id="demo"></p></body></html>

2、如何改变 HTML 元素的样式 (CSS)

<!DOCTYPE html><html><head><script>function myFunction(x){x.style.background="yellow";}</script></head><body>请输入英文字符：<input type="text" onfocus="myFunction(this)"><p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p></body></html>

3、如何添加或删除 HTML 元素

添加：<!DOCTYPE html><html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落11111。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script></body></html>删除：<!DOCTYPE html><html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script></body></html>

0 0