Как передать value ссылки в значение style другого объекта на JS?

<ul id="colors">
    <li>
        <a href="#" class="back" onclick='document.getElementById("myElement").style.cssText="background-color: red;"'>Красный</a>
    </li>
    <li>
        <a href="#" class="back" onclick='document.getElementById("myElement").style.cssText="background-color: green;"'>Зеленый</a>
    </li>
    <li>
        <a href="#" class="back" onclick='document.getElementById("myElement").style.cssText="background-color: black;"'>Черный</a>
    </li>
</ul>

и есть объект:

<div id="myElement" style="width:100px; height: 100px;">hello</div>

document.querySelectorAll('#colors > li > a').forEach(e => {
  e.addEventListener('click', () => {
    document.querySelector('div').style.backgroundColor = e.dataset.color
  })
})

div { width: 100px; height: 100px; }

<ul id="colors">
    <li>
        <a href="#" class="back" data-color="red">Красный</a>
    </li>
    <li>
        <a href="#" class="back" data-color="green">Зеленый</a>
    </li>
    <li>
        <a href="#" class="back" data-color="black">Черный</a>
    </li>
</ul>

<div></div>

document.querySelectorAll('#colors > li > a').forEach(e => {
  e.addEventListener('click', () => {
    document.querySelector('div').style.backgroundImage = 'url('+e.dataset.url+')'
  })
})

div {
  width: 100px;
  height: 100px;
  background-size: cover;
}

<ul id="colors">
    <li>
        <a href="#" class="back" data-url="https://searx.be/image_proxy?url=https%3A%2F%2Fs1.qwant.com%2Fthumbr%2F474x266%2F0%2Fa%2F8ec2bb493e481fa1aa5a861d54a0173139c48d9ccf7ddbb49ce3088640d761%2Fth.jpg%3Fu%3Dhttps%253A%252F%252Ftse2.mm.bing.net%252Fth%253Fid%253DOIP.U88J_cJjZbfpEGjWI3si7QHaEK%2526pid%253DApi%26q%3D0%26b%3D1%26p%3D0%26a%3D0&h=c1dc51277d999a2e0b061a1a68b94701ae438bb799133623dc9a987d39747577">Пример 1</a>
    </li>
    <li>
        <a href="#" class="back" data-url="https://searx.be/image_proxy?url=https%3A%2F%2Fs1.qwant.com%2Fthumbr%2F474x355%2F9%2F2%2F3517b372fb7c98a987c337e3166db815585ef8825a801f35163027254ee703%2Fth.jpg%3Fu%3Dhttps%253A%252F%252Ftse2.mm.bing.net%252Fth%253Fid%253DOIP.goVLhaQ_zulVVIEGy2Tx1AHaFj%2526pid%253DApi%26q%3D0%26b%3D1%26p%3D0%26a%3D0&h=7884882f5a9e045bcdc783c2196615bc00db1d89348b2b8bd13129408d519ab6">Пример 2</a>
    </li>
    <li>
        <a href="#" class="back" data-url="https://searx.be/image_proxy?url=https%3A%2F%2Fimages-wixmp-ed30a86b8c4ca887773594c2.wixmp.com%2Ff%2Fb3be1dae-3caa-4d45-be6c-3de586ba95e2%2Fddx1e8m-26dd8f7d-e50d-4c9c-9b2e-fbdcf0447845.jpg%2Fv1%2Ffill%2Fw_622%2Ch_350%2Cq_70%2Cstrp%2Fview_by_bisbiswas_ddx1e8m-350t.jpg%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvYjNiZTFkYWUtM2NhYS00ZDQ1LWJlNmMtM2RlNTg2YmE5NWUyXC9kZHgxZThtLTI2ZGQ4ZjdkLWU1MGQtNGM5Yy05YjJlLWZiZGNmMDQ0Nzg0NS5qcGciLCJ3aWR0aCI6Ijw9MTYwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.22edUDfqyg5b02ua2mH1Rn4L5mfp1jncwxOnQo4uttc&h=3cd463763e84f7eb8e0c80cdb959bd9baaca8e71e69f712a43616b43cb79fb06">Пример 3</a>
    </li>
</ul>

<div></div>