JS 事件、添加class Name、获取元素样式、设置属性&滚动条shi'jain

1.事件:

 <div>

        我是div

    </div>

    <script>

        let div = document.querySelector('div');

        /* div是一个dom对象

        .onclick相当于给对象添加了一个属性

        属性值是一个函数,点击就会触发 */

        /* div.onclick = function (){

            alert('你好')

        } */

        /* 鼠标移上的时候 */

        div.onmouseover = function(){

            div.style.background = '#ccc'

        }

        /* 鼠标移开 */

        div.onmouseout = function(){

            div.style.background = 'none'

        }

        /* 鼠标按钮被按下 */

        div.onmousedown = function(){

            alert('鼠标按下时反应')

        }

        /* 鼠标抬起时反应 */

        div.onmouseup = function(){

            alert('鼠标抬起时反应')

        }

    </script>

2.添加className:

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bg{

            width: 200px;

            height: 200px;

            background-color: beige;

        }


    </style>

</head>

<body>

    <div>

        我是div1

    </div>

    <script>

        let div = document.querySelector('div');

        /* 添加className */

        div.className = 'bg';

        div.onclick = function(){

            div.className = ''

        }

    </script>

3.获取元素样式:

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div style="width: 200px;height: 50px;background-color: rebeccapurple;">我是div</div>

    <script>

        let div = document.querySelector('div');

        /* 在行内样式上获取样式 */

        console.log(div.style.height);

        /* style是获取不到在行内样式上或者外部样式上的样式的 */

        console.log(div.style.color.fontSize);

        /* window.getComputedStyle可以获取行内,内部,外部所以样式

        但是获得color是rgb格式的,获取的是background所有格式 */

        console.log((window.getComputedStyle(div,null).fontSize));

        console.log((window.getComputedStyle(div,null).color));

        console.log((window.getComputedStyle(div,null).height));

    </script>

获取元素样式练习:

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bg{

            width: 200px;

            height: 200px;

            border: 1px solid #ccc;

        }

        .bg2{

            background-color: red;

            color: #fff;

        }

    </style>

</head>

<body>

    <!-- 一个按钮点击一下出现一个div,里面写着我是div,

        .bg 是内部样式 有宽200px 高200px 和 1px #CCC 灰色边框

        使用JS给div添加上classname bg

        classname.bg2 红色背景 白字

    鼠标移入div显示.bg2

     ,鼠标移出div显示原来的样子,点击div可以获取

    div的背景色  和 color 颜色-->


    <button onclick="fn()">点我</button>

    <script>

        let btn = document.querySelector('button')

        function fn(){

            let div = document.createElement('div');

            let divtext = document.createTextNode('我是div')

            let body = document.querySelector('body')

            div.appendChild(divtext);

            body.appendChild(div)

            div.className = 'bg';

            div.onmouseover = function(){

            div.className = 'bg bg2'

        }

        div.onmouseout = function(){

            div.className = 'bg'

        }

        div.onmousedown = function(){

            let b = window.getComputedStyle(div,null).background

            alert(b)

        }

        }

   </script>

4.属性:

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .div1{

            width: 200px;

            height: 200px;

            padding: 10px;

            margin: 5px;

            border: 3px solid #ccc;

            position: absolute;

            left: 20px;

            top: 10px;

        }

        .c{

            width: 100px;

            height: 100px;

            background-color: slateblue;

            position: absolute;

            top: 30px;

            left: 30px;

        }

    </style>

</head>

<body>

    <div class="div1">

     <div class="c">

    <button onclick="getScroll()">获得滚动条顶部的距离</button>

     </div>

    </div>

    <script>

        let divDom = document.querySelector('div')

        console.log(window.getComputedStyle(divDom,null).width);

        /*offsetWidth = content 宽度+左右padding+左右border  */

        console.log(divDom.offsetWidth);

        /* clientWidth = content 宽度+左右padding 不加border */

        console.log(divDom.clientWidth);


        /* 正常文档流下 offsetLeft = body的margin-left+divDom的margin-left */

        /* 脱离文档流的情况下 offsetLeft(25) = divDom的left(20)+divDom的margin-left */

        /* 正常文档流下offsetTop 就是offsetTop(8) = body 的 margin-top(8) */

        console.log(divDom.offsetLeft);

        console.log(divDom.offsetTop);


        /*offsetParent 自己相对于(父元素)偏移 */

        console.log(divDom.offsetParent );

        let c = document.getElementsByClassName('c')[0];

        /* c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom */

        console.log(c.offsetParent);

        /* offsetParent 如果子元素的父元素已经是定位的元素,那么他的offsetParent

        就是已经定位(relative,absolute,fixed)的父元素,如果不是就是body */

       function getScroll(){

           /* 获取滚动条距离顶部的高度 */

           console.log(document.documentElement.scrollTop);

       }

       /* 滚动条滚动事件 */

       document.onscroll = function(){

           console.log(document.documentElement.scrollTop);

       }

    </script>

</body>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript中Dom 1.基本概念 1.1 什么是window? window:是一个全局对象, 代表浏览...
    煤球快到碗里来阅读 254评论 0 0
  • <!DOCTYPE html> Leon 序号 姓名 年龄 性别 ...
    小胖子_d7d8阅读 200评论 0 0
  • 十五、焦点事件&键盘事件 1. 焦点事件 onfocus =>获得焦点事件 onblur=>失去焦点事件 <...
    默默_01cf阅读 210评论 0 0
  • 十六、其他事件&正则表达式 1. 阻止事件冒泡 默认情况下,触发子元素的事件时,会同时触发父元素相同的事件,这就叫...
    默默_01cf阅读 373评论 0 0
  • 十四、鼠标事件 1. 鼠标事件 // 点击事件 => onclick // 双击事件 => ondblclick ...
    默默_01cf阅读 154评论 0 0