js之获取元素样式

JavaScript010

js之获取元素样式,第1张

<body style="height: 2000px">

<div class="c f" onclick="fn()" style="border:10px solid #cccheight: 80pxcolor:redbackground:rebeccapurple">我是div</div>

<script>

        let div = document.querySelector('div')

        /* 通过style在行内样式上获取样式 */

        /* 使用style获取样式 写的什么 就能获取到什么

        不会转成rgb 和 出现其他的样式 */

        console.log('style',div.style.color )

        console.log('style',div.style.background )

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

        // console.log( div.style.color )

        // /* font-size js中要是用驼峰的方式获取 */

        // console.log( div.style.fontSize )

        /* 使用window.getComputedStyle可以获取行内、内部、外部的所有样式

        但是 获得color是rbg格式的，获取的background是所有属性 */

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

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

        console.log( window.getComputedStyle(div,null).background )

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

        // document.onscroll = function (){

        //    console.log(document.documentElement.scrollTop)

        // }

</script>

1、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。

2、弹出的工具窗口中，默认选择是Dom Explorer功能，它会列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素，也会定位到源代码中位置。

4、对定位到的文字修改CSS样式，添加inline style，比如把字体变为红色。

5、查看元素已经应用的CSS样式，点击"computed"菜单。

6、然后查看元素的布局信息，点击"Layout"菜单。