定位与初识js

最新推荐文章于 2024-06-03 09:20:03 发布

h54211

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量137

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/h54211/article/details/128006227

版权

1、定位

相对定位：相对于自己原来的位置来定位

绝对定位：相对于定位父元素来定位，没有往上找

固定定位：相对于浏览器窗口来定位

position:fixed;

可以设置z-index

<!DOCTYPE html>
<html lang="en">
<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>
        body {
            height: 3000px;
        }
        .box {
            /* position: absolute; */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            /* position: fixed;
            top: 0;
            left: 0; */
            width: 300px;
            height: 300px;
            background-color: red;
            /* z-index: 1; */
        }
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    
    <!-- 遮罩 -->
    <div class="cover"></div>
    <div class="box"></div>
</body>
</html>

2、js变量

js的组成

核心语法：ECMAScript

文档对象模型： DOM

浏览器对象模型：BOM

（1）什么是变量？存储数据的容器

（2）声明 var 变量名

（3）赋值变量名 = 值

（4）声明的同时赋值 var 变量名 = 值

（5）声明多个变量 var 变量名1= 值1,变量名2 = 值2,变量名3 = 值3

（6）多个变量值一样 var 变量名1 = 变量名2 = 变量名3 = 值

3、js三种引入方式

（1）内部

（2）外部

（3）行内

4.js中给元素添加点击事件

点哪个元素.on事件类型 = function() {}

<script>
        // 标签名.on+事件类型 = function() {}
        box.onclick = function() {
            alert('zhang')
            console.log('hou')
        } 
    </script>

5. js的调试语句：

1、作用: 调试代码

2、常用的调试语句：

（1）alert()

语法： alert(message)

作用：在页面弹出一个警示框，给用户看的

特点：会阻断程序的执行；如果一次需要弹出多条的话，只能识别第一个

（2）console.log()

语法： console.log(message)

作用：在浏览器的控制台中打印信息，写给程序员看的

特点：可以在控制台一次打印多个，中间逗号隔开

（3）document.wirte()

语法： document.wirte(message)

作用：在文档（网页）中显示信息，给用户看的

特点：会覆盖
<!DOCTYPE html>
<html lang="en">
<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>
        .box {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    
    <div class="box" id="box"></div>
    <script>
        // alert(1);
        // alert('hello world');
        //alert('hello world','你好'); //hello world

        // console.log(111);
        // console.log('hello world');
        // console.log('hello world','你好');

        // document.write('hello world')
        // document.write('你好')

        box.onclick = function() {
            document.write('你好')
            document.write('你好111')
        }
    </script>
</body>
</html>

6、通过id获取元素

var 变量名 = document.getElementById('id名');

<!DOCTYPE html>
<html lang="en">
<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 id="boc">111</div>
    <script>
        // 声明变量
        var box = document.querySelector('boc')
        //通过id document.getElementById('boc') 获取所要的元素
        // 添加点击事件
        box.onclick = function () {
            console.log(111);
            
        }

    </script>
</body>
</html>

7..操作元素的css样式

获取： var 变量名 = 元素.style.width

设置：元素.style.width = 值

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- 
        操作元素的css样式

            获取元素的行内css样式        var 变量名 = 元素.style.css属性
            设置元素的css样式        元素.style.css属性 = 新值

            注意： 
                font-size在js中我们要写成驼峰的写法fontSize
                通过这种方式可以获取行间样式，如果是内部样式或者外部样式这种方法是拿不到的，但是可以设置
     -->
    <div id="box" style="width: 200px; height: 200px;background: red;" ></div>
    <button id="btn">获取元素样式</button>
    <button id="btn2">设置元素的样式</button>
    <script>
         // 点击获取的这个按钮，拿到id名称为box的元素的宽度

        //  1.获取元素
        var box = document.getElementById('box')
        var btn = document.getElementById('btn')
        var btn2 = document.getElementById('btn2')
        // 2.点击事件
        btn.onclick = function() {
            // 3.做什么 获取box的宽
            var w = box.style.width
            // 获取颜色
            var color = box.style.background
            // 获取字号
            var fz = box.style.fontSize
            console.log(w,fz,color)

        }
        // 点击btn2设置box的宽
        btn2.onclick = function () {
            box.style.width = '500px'
            box.style.background = 'aqua'
            
        }
    </script>
</body>
</html>

h54211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位与初识js

（5）声明多个变量 var 变量名1= 值1,变量名2 = 值2,变量名3 = 值3。（6）多个变量值一样 var 变量名1 = 变量名2 = 变量名3 = 值。特点：会阻断程序的执行；作用：在浏览器的控制台中打印信息，写给程序员看的。作用：在文档（网页）中显示信息，给用户看的。获取： var 变量名 = 元素.style.width。作用：在页面弹出一个警示框，给用户看的。设置：元素.style.width = 值。绝对定位：相对于定位父元素来定位，没有往上找。
复制链接

扫一扫