将1 div移至2 div。
我有两个div。div-1 and div-2 .it需要一直保留，但是我想要一些菜单项使用另一个div名称div-3，在单击按钮时可以看到它。我想要div-3在div-1和div-2同时，.how，我可以这样做吗？
回答 1
Stack Overflow用户
发布于 2017-11-11 20:27:12
JavaScript备注
生平是JavaScript中一种非常常见的设计模式，通常用于隐藏代码，使其不会被其他脚本更改。
可以使用addEventListner函数将事件侦听器添加到元素中。
您可以使用接受选择器的HTMLElement函数获得querySelector。因此，要获得第一个div，可以使用document.querySelector("div")。要获得带有id "item“的元素，可以使用document.querySelector("#item")。要获得类"active“的第一个元素元素，可以使用document.querySelector(".active")。您还可以使用document.querySelector("div#item.active")来获取填充所有先前需求的项，也可以使用document.querySelector("div, #item, .active")获取填充任何需求的项。如您所见，这与CSS选择器的工作原理相同。
要检查变量是否是类的实例，可以使用实例数。
有几种方法可以使用JavaScript更改元素的外观。一个是更改类名element.className = "active"，另一个是直接更改样式element.style = "opacity: 1;"。
造型笔记
要将位置设置为其他元素之上的元素，需要将其position设置为absolute，将容器的元素设置为relative。当您绝对定位一个元素时，它的位置相对于最后一个定位relatively的容器(默认为<html>元素)。
有两种主要的方法可以将元素放在一起：float: left;和display: inline-block;。这就像在记事本上写东西一样，它适合彼此旁边的许多元素，并且在它们下面重复相同的过程。
有三种常见的隐藏元素的方法。1: opacity: 0;，它只是使项目不可见，但它仍然存在，所以您可能也应该使用pointer-events: none;，这样它就不会阻止您单击它背后的内容。2: height: 0;，这只是缩小元素，使其没有高度，本质上使其不可见。3: display: block;，本质上完全删除了元素。
示例
// IIFE Design Pattern
(function() {
// Run onLoad function if page is fully loaded
if (document.readystate === "complete") onLoad();
// Else add an event listener to call onLoad function when page gets fully loaded
else document.addEventListener("DOMContentLoaded", onLoad);
var divIsActive = false;
/**
* Function to be called when page is fully rendered
* @returns {void}
*/
function onLoad() {
// Find button
var button = document.querySelector("#toggle");
// Check if the button was found
if (button instanceof HTMLElement) {
// Add an click event listener
button.addEventListener("click", toggle);
}
}
/**
* Toggles the div to open/close
* @returns {void}
*/
function toggle() {
// Find Div
var div = document.querySelector("#div-3");
// Check if the div was found
if (div instanceof HTMLElement) {
// swap the boolean value
divIsActive = !divIsActive;
// change the classname based on the boolean value
div.className = divIsActive ? "active" : "";
}
}
})();html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
#div-1, #div-2 {
height: 100%;
float: left;
width: 50%;
}
#div-1 {
background-color: brown;
}
#div-2 {
background-color: pink;
}
#div-3 {
background-color: green;
pointer-events: none;
transition: all 0.4s;
position: absolute;
height: 40%;
opacity: 0;
right: 0;
left: 0;
top: 0;
}
#div-3.active {
pointer-events: all;
opacity: 1;
}
#toggle {
position: absolute;
cursor: pointer;
z-index: 99999;
right: 10px;
top: 10px;
}<div id="container">
<button id="toggle">Toggle</button>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
</div>
https://stackoverflow.com/questions/47242448
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号