javascript控制DIV样式

最新推荐文章于 2024-07-31 17:00:00 发布

writewind

最新推荐文章于 2024-07-31 17:00:00 发布

阅读量440

点赞数 2

分类专栏： javascript 文章标签： javascript indexOf onClick

本文链接：https://blog.csdn.net/writewind/article/details/79757454

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现的如图所下所示效果，点击相应属性对应的div出现对应效果，demo地址：http://jsrun.net/m2ZKp

归纳知识点：

1、遮罩层的实现中得到页面的宽与高

javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

2.js循环添加onclick事件无法正常的问题

知识点：https://blog.csdn.net/u014645632/article/details/53536330

3.使用indexOf判断字符串是否包含某字符串,String对象中查找子字符

indexOf用法:

返回 String 对象内第一次出现子字符串的字符位置，如果没有找到子字符串，则返回 -1

知识点：https://www.cnblogs.com/fishtreeyu/archive/2011/03/07/1975613.html

4.用JS添加和删除class类名

添加：节点.classList.add("类名")；

删除：节点.classList.remove("类名")；

知识点：https://www.cnblogs.com/dealblog/p/6885437.html

--------------------------------------------------------------------------------------------------------------------

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置div样式</title>
    <style>
        a {
            cursor: pointer;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .tip {
            font-weight: bold;
            font-size: 16px;
            margin: 20px 0 0 20px;
        }

        .div1Class {
            width: 100px;
            height: 100px;
            border: 6px solid #505050;
            margin: 10px 0 0 20px;
            transition: all 1s;
        }

        #setBtn {
            background-color: #ff8040;
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            color: #fff;
            line-height: 40px;
        }

        #shade {
            position: absolute;
            top: 0px;
            z-index: 3;
            background-color: #000;
            opacity: 0.4;

        }

        #model {
            box-sizing: border-box;
            position: absolute;
            z-index: 5;
            width: 340px;
            height: 280px;
            left: 50%;
            top: 50%;
            padding: 20px;
            border: 6px solid rgba(0, 0, 0, 0.5);
            background-color: #fff;

        }

        #colorWarp a,
        #widthWarp a,
        #hegihtWrap a {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-right: 5px;
            margin-top: 10px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ccc;

        }

        #widthWarp a,
        #hegihtWrap a {
            background-color: #eee;
        }

        #colorWarp a {
            color: #fff;
            margin-left: -2px;
            margin-right: 7px;

        }

        .color1 {
            background-color: #ff0000;
        }

        .color2 {
            background-color: #d9de07;
        }

        .color3 {
            background-color: #3566e8;
        }

        .width1 {
            width: 200px;
        }

        .width2 {
            width: 300px;
        }

        .width3 {
            width: 400px;
        }

        .height1 {
            height: 200px;
        }

        .height2 {
            height: 300px;
        }

        .height3 {
            height: 400px;
        }

        .modelFooter {
            text-align: center;
            margin-top: 30px;
        }

        .modelFooter a {
            background-color: #0080ff;
            color: #fff;
            display: inline-block;
            width: 80px;
            height: 36px;
            line-height: 36px;

        }
    </style>
    <script>
        window.onload = function () {
            var osetBtn = document.getElementById("setBtn");
            var oDiv1 = document.getElementById("div1");
            var oShade = document.getElementById("shade");
            var oModel = document.getElementById("model");
            var oResetBtn = document.getElementById("resetBtn");
            var oSubmitBtn = document.getElementById("submitBtn");
            var oColorWarp = document.getElementById("colorWarp");
            var oWidthWarp = document.getElementById("widthWarp");
            var oHegihtWrap = document.getElementById("hegihtWrap");
            getShadeSize(oShade);
            setModel(oModel);
            hideModel(oShade, oModel);
            osetBtn.onclick = function () {
                showModel(oShade, oModel);
            }
            oShade.onclick = function () {
                hideModel(oShade, oModel);
            }
            oSubmitBtn.onclick = function () {
                hideModel(oShade, oModel);
            }
            oResetBtn.onclick = function () {
                resetDiv(oDiv1);
            }
            oResetBtn.οnclick=function(){
             clearClass(oDiv1);
            }

            setClass(oColorWarp, oDiv1, "color");
            setClass(oWidthWarp, oDiv1, "width");
            setClass(oHegihtWrap, oDiv1, "height");
           
        };
        /***设置遮罩层与页面一样宽高***/
        var getShadeSize = function (oShade) {
            oShade.style.width = document.body.clientWidth + "px";
            oShade.style.height = document.body.clientHeight + "px";

        }
        /***设置弹出框垂直居中***/
        var setModel = function (oModel) {

            oModel.style.marginLeft = -oModel.offsetWidth / 2 + "PX";
            oModel.style.marginTop = -oModel.offsetHeight / 2 + "px";

        }
        /***显示遮罩层***/
        var showModel = function (oShade, oModel) {
            oShade.style.display = "block";
            oModel.style.display = "block";
        }
        /**隐藏遮罩层***/
        var hideModel = function (oShade, oModel) {
            oShade.style.display = "none";
            oModel.style.display = "none";
        }
        /***添加样式***/
        var setClass = function (Warp, oDiv1, classSring) {
            var arr = Warp.children;
            for (var i = 0; i < arr.length; i++) {
                let index = i + 1;
                arr[index - 1].onclick = function () {
                    setClassString(oDiv1, classSring, index);
                }

            }
        }
        /***去除同类型的其他样式***/
        var setClassString = function (oDiv1, classSring, index) {
            for (j = 0; j < oDiv1.classList.length; j++) {
                if (oDiv1.classList[j].indexOf(classSring) != -1) {
                    oDiv1.classList.remove(oDiv1.classList[j]);
                }
            }
            oDiv1.classList.add(classSring + index);
        }
        /**恢复原状**/
        var clearClass=function(oDiv1)
        {
            oDiv1.setAttribute("class","div1Class");
        }
    </script>
</head>

<body>
    <div class="tip">请为下面的DIV设置样式：
        <a id="setBtn">设置样式</a>
    </div>
    <div id="div1" class="div1Class"></div>
    <div id="shade"></div>
    <div id="model">
        <div id="colorWarp">请选择背景色：
            <a class="color1">红</a>
            <a class="color2">黄</a>
            <a class="color3">蓝</a>
        </div>
        <div id="widthWarp">请选择宽(px)：
            <a class="width1">200</a>
            <a class="width2">300</a>
            <a class="width3">400</a>
        </div>
        <div id="hegihtWrap">请选择高(px)：
            <a class="height1">200</a>
            <a class="height2">300</a>
            <a class="height3">400</a>
        </div>
        <div class="modelFooter">
            <a id="resetBtn">恢复</a>
            <a id="submitBtn">确定</a>
        </div>
    </div>
</body>
</html>