DOM操作html、css

最新推荐文章于 2023-09-05 14:28:51 发布

MissZhou要努力

最新推荐文章于 2023-09-05 14:28:51 发布

阅读量393

点赞数

分类专栏：前端文章标签： html 操作 dom

本文链接：https://blog.csdn.net/zhou_yujia/article/details/49308491

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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 οnclick="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 οnclick="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>

MissZhou要努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作html、css

事件 hello Hello button function demo() { // var nv= document.getElementById("pid"); 注释掉的只是证明绝不要在文档加载完使用这个document.write()会覆盖文档 // nv.innerHTML="
复制链接

扫一扫