DOM操作html、css

来源：互联网发布：淘宝助理有什么作用编辑：程序博客网时间：2024/06/05 21:52

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>事件</title></head><body>    <p id="pid">hello</p>    <a id="aid" href="http://www.baidu.com">Hello</a>    <button onclick="demo()">button</button>    <script>        function demo()        {          // var nv= document.getElementById("pid"); 注释掉的只是证明绝不要在文档加载完使用这个document.write()会覆盖文档         //   nv.innerHTML="World";           /// document.getElementsByTagName("p");//选择相同元素的第一个            document.getElementById("aid").href="http://www.jikexueyuan.com";//本题使用的是链接 图片等同理        }    </script></body></html>

改css:<pre name="code" class="html"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>事件</title>    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div  id="div" class="div">        Hello    </div>    <button onclick="demo()">button</button>    <script>        function demo()        {            document.getElementById("div").style.background="red";//是引号！!        }    </script></body></html>

EventListener句柄:

<pre name="code" class="html"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>事件</title>    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <p id="pid">hello</p>    <button id="btn">butn</button><script>    document.getElementById("btn").addEventListener("click",function(){        alert("world")    })</script></body></html>

<pre style="font-family: 宋体; font-size: 12pt; background-color: rgb(255, 255, 255);"><pre name="code" class="html"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>事件</title>    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <p id="pid">hello</p>    <button id="btn">butn</button><script>    var x=document.getElementById("btn");    x.addEventListener("click",hello);    x.addEventListener("click",world);    x.removeEventListener("click",world);    function hello(){        alert("hello");    }    function world(){        alert("world");    }</script></body></html>

0 0