Javascript 从一个页面获取元素，并使用JS将其添加到另一个页面
我正在努力做到以下几点： 我有许多块要转移到另一页。应在单击其中一个块（不是称为“横幅”的块）时进行传输，并应将其显示为滑块（单击的元素应显示在中心，其他元素应隐藏/半隐藏） 例如，如果我单击绿色块，我应该被重定向到第二个页面（称为“图库”），在那里我应该看到绿色块就在中间（被其他块包围，但我认为现在还为时过早） 我离目标还有很长的一段路要走，但是我被困在了获取我点击的块并将其转移到另一个页面的概念上。你能帮帮我吗 很抱歉，这只是一个试用版，我只是想先了解一下这个概念Javascript 从一个页面获取元素，并使用JS将其添加到另一个页面,javascript,html,css,Javascript,Html,Css,我正在努力做到以下几点： 我有许多块要转移到另一页。应在单击其中一个块（不是称为“横幅”的块）时进行传输，并应将其显示为滑块（单击的元素应显示在中心，其他元素应隐藏/半隐藏） 例如，如果我单击绿色块，我应该被重定向到第二个页面（称为“图库”），在那里我应该看到绿色块就在中间（被其他块包围，但我认为现在还为时过早） 我离目标还有很长的一段路要走，但是我被困在了获取我点击的块并将其转移到另一个页面的概念上。你能帮帮我吗 很抱歉，这只是一个试用版，我只是想先了解一下这个概念 “严格使用”； 设sma
“严格使用”；
设smallBlocks=document.querySelectorAll（'.small-blocks\uuu block'）；
让navBack=document.querySelector（'.small-blocks__-arrows--back'）；
让navForward=document.querySelector（'.small-blocks__-arrows--forward'）；
让颜色=[‘粉色’、‘黄色’、‘绿色’、‘灰色’、‘紫色’、‘黑色’]；
let元素；
设onClickBlock=函数（evt）{
元素=evt.currentTarget；
window.open（'gallery.html'，'u blank'）；
}
smallBlocks.forEach（函数（元素）{
元素。addEventListener（'click'，onClickBlock）；
});
sessionStorage.setItem（'clickedElement'，元素）；
document.querySelector（'.main'）.insertAdjacentHTML（'beforebeagin'，sessionStorage.getItem（element））
正文{
保证金：0；
填充：0；
}
.视觉隐藏{
位置：绝对位置；
宽度：1px；
高度：1px；
保证金：-1px；
边界：0；
填充：0；
空白：nowrap；
-webkit剪辑路径：插图（100%）；
剪辑路径：插入（100%）；
剪辑：rect（0）；
溢出：隐藏；
}
.包装纸{
宽度：90%；
左：5%；
右：5%；
保证金：0自动；
}
.横幅{
宽度：80%；
保证金：0自动；
高度：300px；
边缘底部：100px；
背景：蓝色；
}
.小街区{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
宽度：80%；
保证金：0自动；
}
.小型楼宇{
宽度：320px；
边缘底部：50px；
}
.small-block\uuu-block——图像{
宽度：320px；
高度：150像素；
}
.small-block_uu-block——图像为黑色，
.small-blocks-gallery\uuuu block——图像黑色{
背景：黑色；
}
.small-block_uu-block——图像黄色，
.small-blocks-gallery\uuuu block——图像黄色{
背景：黄色；
}
.small-block\uuu-block——图像为绿色，
.small-blocks-gallery\uuuu block——图像绿色{
背景：绿色；
}
.small-blocks\uuuu-block——图像为紫色，
.small-blocks-gallery\uuuuu block——紫色图像{
背景：紫色；
}
.small-block_uu-block——图像为粉红色，
.small-blocks-gallery\uuuuu block——图像为粉红色{
背景：粉红色；
}
.small-block_uu-block——图像灰色，
.small-blocks-gallery\uuuu block——图像灰色{
背景：灰色；
}
.小型块\uuuu块-说明{
字体大小：粗体；
字体大小：24px；
线高：30px；
}
.小区块\uuuu区块-时间{
字号：18px；
线高：24px；
}
.隐藏{
显示：无；
}
/*画廊*/
梅因先生{
保证金：0自动；
位置：相对位置；
溢出：隐藏；
宽度：800px；
高度：600px；
}
·小街区画廊{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：8000px；
保证金：0自动；
}
.小型楼宇-廊道![3]楼{
宽度：600px；
边缘底部：50px；
高度：400px；
}
.small-blocks-gallery\uuuuu block--图像{
宽度：500px；
高度：300px；
}
.small-blocks-gallery\uuuuu block--说明{
宽度：500px；
字体大小：粗体；
字体大小：24px；
线高：30px；
}
.小街区-画廊{
位置：绝对位置；
最高：40%；
宽度：800px；
}
.小砌块-廊道\导航箭头{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.小方块-图库导航箭头-返回{
边界：无；
背景：透明；
字体大小：40px；
}
.小方块-廊道导航箭头-前进{
边界：无；
背景：透明；
字体大小：40px；
}
测验
Фотогалерея
Баннер
Маленькие блоки
2019年3月10日
2019年3月10日
2019年3月10日
2019年3月10日
2019年3月10日
2019年3月10日
廊道试验
Маленькие блоки
<html>
<head>
<script type="text/javascript">
var popup = null;
function highlightPopupElement(popupDocument) {
// Checks if the popup is fully loaded. If not,
// the function sets a timeout call to itself and exits.
if (!popupDocument.getElementById) {
setTimeout(function() {highlightPopupElement(popupDocument)}, 100);
return;
}
// Retrieves the element to highlight
elemToHighLight = popupDocument.getElementById('to-highlight');
if (!elemToHighLight) {
console.log("Error: element to highlight not found");
return;
}
// Highlighting
elemToHighLight.className="highlighted";
}
// Function called by the button click
function loadAndHighlight() {
popup = window.open('gallery.html', 'showtime');
}
</script>
</head>
<body>
<!-- Click the button to load the popup and highlight an element -->
<button onclick="loadAndHighlight()">Showtime</button>
</body>
</head>
<html>
<head>
<style>
li.highlighted {background-color:c0c0f0;}
</style>
<script type="text/javascript">
function loaded() {
window.opener.highlightPopupElement(document);
}
</script>
</head>
<body onload="loaded()">
<ul>
<li>Not Highlighted</li>
<li id="to-highlight">Highlighted :-)</li>
<li>Not Highlighted</li>
</ul>
</body>
</head>