JavaScript-简单的CSS样式

最新推荐文章于 2022-09-01 12:24:41 发布

陈新月-Phyllis

最新推荐文章于 2022-09-01 12:24:41 发布

阅读量359

点赞数

分类专栏： # JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/csxypr/article/details/79305873

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

感觉小咸儿最近懒散了很多啊！已经很久没有更新自己的博客内容了，最近小咸儿在学习JavaScript，所以接下来，小咸儿来给大家分享一下在JavaScript中简单的CSS样式。

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS特点：1、丰富的样式；2、易于使用和修改；3、多页面应用；4、层叠；5、页面压缩；

简单的介绍了一下CSS是什么，接下来就是主要学习的内容：

position属性：
    static(默认)
    Relative
    Fixed（脱离文档流）
    absolute（脱离文档流）

除此之外，还有一些其他的属性：位置中的上下左右

与top、left、bottom和right的连用：
    top元素顶端与距离浏览器上边缘的距离
    left元素顶端与距离浏览器左边缘的距离
    bottom元素顶端与距离浏览器下边缘的距离
    right元素顶端与距离浏览器右边缘的距离

接下来的内容就是relative是干什么用的？

在绝对定位默认是以浏览器作为参考的情况下：
在relative定位的元素中，位置的层次主要为Z-Index属性

而对于样式的显示和隐藏Display的运用呢？则具体如下：

none（无）、block（块）、inline（行级）
标签：div、span

小咸儿举一个具体的示例：有层次的显示位置

首先添加一个HTML页，在HTML中写入代码，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css" >
        #dv1, #dv2 {
            width:300px;
            height :200px;
            position :absolute ;
            border :1px solid red;
        }
        #dv1 {
            top:50px;
            left:100px;
            background-color :blue ;
            z-index:0;
        }
        #dv2 {
            background-color :green ;
            z-index:0;
        }
    </style>
    <script type ="text/javascript">
        var dv = null;
        onload = function () {
            var dvs = document.getElementsByTagName("div");
            for (var i = 0; i < dvs.length; i++) {
                dvs[i].onclick = function () {
                    if (dv != null) dv.setAttribute("style", "z-index:0");
                    this.setAttribute("style", "z-index:1");
                    dv = this;
                };
            }
        };
    </script>
</head>
<body>
        <div id="dv1"></div>
        <div id="dv2"></div>
</body>
</html>