如何从多个元素复制属性值并将每个属性值复制到另一个元素？

debugcn 发表于 Dev

Stelios Botonakis

我有很多tag元素，<a class="banner2">每个元素都有不同的background imageurl和href值。

<a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_template_directory_uri(); ?>/images/koniaris.jpg');">

</a>

我还具有相同数量的不同元素<a class="banner3">，分别希望具有相同的背景图像和href值。

<a href="#" target="_blank" class="banner3">

</a>

我的意思是，对于每个.banner2元素，我都希望各自的.banner3元素具有其背景图片url和href值。

那么，如何为这两个类循环并复制属性值？

亚伯龙修斯教授

您可以这样尝试，CSS大小只是为了使元素在测试期间出现，而红色边框只是用来标识哪个是哪个。

捕获对要banner3设置背景的类的所有元素的引用，还捕获要从中选择背景图像的所有元素的节点列表。遍历节点列表并根据索引选择相应的其他节点i-分配背景。

这仅显示了要复制的背景图像-因为href属性相同，所以复制该属性似乎没有多大意义，但是这样做很简单。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Copy background image to corresponding element</title>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                let col=Array.prototype.slice.call( document.querySelectorAll('a.banner3') );
                Array.prototype.slice.call( document.querySelectorAll('a.banner2') ).forEach( ( a, i )=>{
                    col[ i ].style.backgroundImage=a.style.backgroundImage;
                })
            });
        </script>
        <style>
            .banner2, .banner3{ display:block; width:300px; height:300px; margin:1rem; }
            .banner3{ border:1px solid red; }
        </style>
    </head>
    <body>

        <a href="#" target="_blank" class="banner2" style="background-image:url('images/25398691_10214872887759191_3871602197915899055_n.jpg');"></a>
        <a href="#" target="_blank" class="banner2" style="background-image:url('images/27972581_10157094423021258_4761504312023581045_n.jpg');"></a>
        <a href="#" target="_blank" class="banner2" style="background-image:url('images/183096_1908068104875_1336992821_2226175_4522067_n.jpg');"></a>



        <a href="#" target="_blank" class="banner3"></a>
        <a href="#" target="_blank" class="banner3"></a>
        <a href="#" target="_blank" class="banner3"></a>
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。