javascript css(层叠样式表)

钟意

已于 2022-03-04 23:50:14 修改

阅读量690

点赞数 5

文章标签： javascript

于 2022-03-04 23:46:48 首次发布

本文链接：https://blog.csdn.net/m0_61857264/article/details/123287560

版权

css层叠样式表(用来装饰网页界面)

js代码操作css

css代码

css层叠样式表(用来装饰网页界面)

js代码操作css

css代码在style(样式)里面进行操作

案例

在style(样式)里面进行操作

标签选择器（直接通过标签点击）

<head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100; height: 100; position: absolute; top: 20px; right: 600px; }

    </style>
</head>

<div id="b" class="a">
    <img id="i1" src="images/show1_big.jpg"  >
</div>

class(类)选择器

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .a{
        width: 100;
        height: 100;
        position: absolute;
        top: 20px;
        right: 600px;
    }
    
    </style>
</head>

<div id="b" class="a">
    <img id="i1" src="images/show1_big.jpg"  >
</div>

id选择器（给标签设置个id然后通过id去点击）

<style type="text/css">
        div{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 30px;
            right: 200px;
            transition: .1s;
        }
    </style>
</head>
<body>
    <div id="b">
        <img src="img/1.gif" id="ad" >
    </div>

案例

window(窗口)的滚动条事件（图形跟随滚动条移动）

<head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; position: absolute; top: 30px; right: 200px; transition: .1s; } </style> </head>

<body>
    <div id="b">
        <img src="img/1.gif" id="ad" >
    </div>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>  
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>  
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>  
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
     <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
    <p>riueriytyiureyu</p>
                            <script >
                             window.onscroll=()=> {
                                    //获取到窗口滚动的距离 scrollTop
                                    b.style.top=30+document.documentElement.scrollTop+"px"
                                    console.log(b.style.top)
                                }
                            </script>
                            
</body>
</html>

鼠标移动事件（图形跟随鼠标移动）

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="a">
        
    </div>
    <script type="text/javascript">
        window.onmousemove=(e)=>{
                a.style.left=e.clientX+"px"
            a.style.top=e.cliY+"px"
        
        }
    </script>
</body>