Javascript 除了列表项，如何模糊整个身体？_Javascript_Jquery_Html_Node.js_Web Frontend

Javascript 除了列表项，如何模糊整个身体？

javascript jquery html node.js

Javascript 除了列表项，如何模糊整个身体？,javascript,jquery,html,node.js,web-frontend,Javascript,Jquery,Html,Node.js,Web Frontend,我想创造一种效果，使整个身体变得模糊或暗淡，只有一个特定的列表项显示清晰。但是，当我将z索引设置为列表项时，它不起作用。当我设置整个未排序列表的z索引时，它可以工作，但所有列表项都显示得很清楚（我不希望这样）让我向您展示我的html代码： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

我想创造一种效果，使整个身体变得模糊或暗淡，只有一个特定的列表项显示清晰。但是，当我将z索引设置为列表项时，它不起作用。当我设置整个未排序列表的z索引时，它可以工作，但所有列表项都显示得很清楚（我不希望这样）

让我向您展示我的html代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashish Toppo</title>
    <link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <!-- the html for the top bar starts here -->
    <div class="top_bar" id="topBar">
        <div class="logo_name" id="logoName">Ashish Toppo</div>
        <ul class="menu">
            <li class="menu_items currently_active_menuItem" id="home">home</li>
            <li class="menu_items" id="about">about</li>
            <li class="menu_items" id="education">education</li>
        </ul>
    </div>
    <!-- the html for the top bar ends here -->

    <!-- the html for the intro starts here -->
    <div class="intro" id="intro">
        <div class="profile_pic" id="profilePic">
            <img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
        </div>
        <div class="intro_box" id="introBox">
                <!-- some introduction text here -->
                <center id="aboutPointer">To know more about me, go to the about section!</center>
        </div>

    </div>
    <!-- the html for the intro ends here -->


<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>

/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
    var obj = {
        element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
                 ( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) : 
                 ( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) : 
                 console.error("The provided HTML element could not be found"),
        html: () => { return obj.element; },
        changeText: (text) => { obj.html().innerHTML = text; },
        appendText: (text) => { 
            let appendOn = obj.html().innerHTML;
            obj.html().innerHTML = appendOn + text;
        },
        previousDisplayMode: "block",
        hide: () => {
            obj.previousDisplayMode = obj.html().style.display;
            obj.html().style.display = "none"; 
        },
        show: () => { 
            obj.html().style.display = obj.previousDisplayMode;
        },
        on: (event, callBack) => {
            obj.html().addEventListener(event, callBack);
        },
        previousZIndex: 1,
        focusOn: () => {
            let blur = document.createElement("div");
            blur.className = "theDivThatBlurs";
            blur.style.width ="100vw";
            blur.style.height ="100vh";
            blur.style.display ="block";
            blur.style.position ="fixed";
            blur.style.top ="0";
            blur.style.left ="0";
            blur.style.zIndex ="9";
            blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
            blur.innerHTML = "";
            document.body.appendChild(blur);

            obj.html().style.zIndex = "100";
        }
    }
    return obj;
}

/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
    const active = d.getElementsByClassName("currently_active_menuItem");
    active[0].style.textDecoration = "none";
})(document);

var about = get("about");

var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
    console.log("the about pointer has been clicked");
    focus(about);
});


function focus(theElement){
    console.log("the focus is working");
    theElement.focusOn();
}

而index.js文件如下所示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashish Toppo</title>
    <link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <!-- the html for the top bar starts here -->
    <div class="top_bar" id="topBar">
        <div class="logo_name" id="logoName">Ashish Toppo</div>
        <ul class="menu">
            <li class="menu_items currently_active_menuItem" id="home">home</li>
            <li class="menu_items" id="about">about</li>
            <li class="menu_items" id="education">education</li>
        </ul>
    </div>
    <!-- the html for the top bar ends here -->

    <!-- the html for the intro starts here -->
    <div class="intro" id="intro">
        <div class="profile_pic" id="profilePic">
            <img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
        </div>
        <div class="intro_box" id="introBox">
                <!-- some introduction text here -->
                <center id="aboutPointer">To know more about me, go to the about section!</center>
        </div>

    </div>
    <!-- the html for the intro ends here -->


<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>

/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
    var obj = {
        element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
                 ( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) : 
                 ( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) : 
                 console.error("The provided HTML element could not be found"),
        html: () => { return obj.element; },
        changeText: (text) => { obj.html().innerHTML = text; },
        appendText: (text) => { 
            let appendOn = obj.html().innerHTML;
            obj.html().innerHTML = appendOn + text;
        },
        previousDisplayMode: "block",
        hide: () => {
            obj.previousDisplayMode = obj.html().style.display;
            obj.html().style.display = "none"; 
        },
        show: () => { 
            obj.html().style.display = obj.previousDisplayMode;
        },
        on: (event, callBack) => {
            obj.html().addEventListener(event, callBack);
        },
        previousZIndex: 1,
        focusOn: () => {
            let blur = document.createElement("div");
            blur.className = "theDivThatBlurs";
            blur.style.width ="100vw";
            blur.style.height ="100vh";
            blur.style.display ="block";
            blur.style.position ="fixed";
            blur.style.top ="0";
            blur.style.left ="0";
            blur.style.zIndex ="9";
            blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
            blur.innerHTML = "";
            document.body.appendChild(blur);

            obj.html().style.zIndex = "100";
        }
    }
    return obj;
}

/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
    const active = d.getElementsByClassName("currently_active_menuItem");
    active[0].style.textDecoration = "none";
})(document);

var about = get("about");

var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
    console.log("the about pointer has been clicked");
    focus(about);
});


function focus(theElement){
    console.log("the focus is working");
    theElement.focusOn();
}

可以使用“长方体阴影”属性实现调暗效果。简单快捷：）

只要以编程方式切换一个类，它就可以用于您拥有的任何元素

代码

函数focusAndDim（）{
document.getElementById（“maindiv”）.classList.toggle（“可见”）；
//如果你想变得更花哨；）
document.getElementsByTagName（“正文”）[0].classList.toggle（“模糊”）；
}

。可见{
盒影：10000px#ccc；
/*下面的代码将隐藏所有其他内容*/
/*盒影：10000px#fff*/
位置：相对位置；
}
.btn{
高度：20px；
线高：1.4；
边框：2个实心#999；
填充：12px 24px；
边缘底部：10px；
边界半径：2px；
光标：指针；
}
身体{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
证明内容：中心；
高度：100vh；
}
body.blur div{
过滤器：模糊（2px）；
}
body.blur div.visible{
过滤器：模糊（0）；
}

点击我
其他元素

也许可以帮助您回答您的问题？