javascript - 使用javascript从css检索背景图像而不使用它的ID

Question

我环顾四周，很难找到一个线程来完成我想要它做的事情。就我而言，我什至不知道这是否可能。我想要做的是在单击时检索背景图像文件名(特别是如果它是链接)。我有一个记录所有点击的脚本，但我需要的最后一 block 是存储在 CSS 文件中的背景图像名称(带有名称的文件路径甚至可以)。任何人都有关于如何在不使用 div 或类的情况下完成此操作的想法或解决方案？这是我现在拥有的:

JavaScript 和 HTML

<script type="text/javascript">
var arrayWithElements = new Array(); //,replaytimer;

document.onclick = clickListener;

function clickListener(e)
{
var clickedElement=(window.event)
                    ? window.event.srcElement
                    : e.target,
    tags=document.getElementsByTagName(clickedElement.tagName);

for(var i=0;i<tags.length;++i)
{
  if(tags[i]==clickedElement)
  {
    if(clickedElement.tagName=="A")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.href,clickedElement.innerText,document.location.href,document.images.href);
    }
    if(clickedElement.tagName=="IMG")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
    }
    if(clickedElement.tagName=="DIV")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
    }
    if(clickedElement.tagName=="CLASS")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
        }
      }
    }
  }
</script>
</head>

<a id="1" href="#">trial1</a>
<a id="2" href="http://www.google.com" target="blank">google</a>
<a id="3" href="http://www.google.com">google</a>
<a id="4" href="http://www.google.com" target="_blank"><img id="image" src="untitled.jpg"/></a>
<a id="5" href="trial.html">
<input type="text" id="text-test"/>
<a href="http://www.google.com"><div id="image-link"></div></a>

CSS:

#image-link {
        background-image:url('untitled.jpg');
        width: 50px;
        height:50px;
        border: 1px solid #000000;
}

这是一个测试文件，将在不久的将来转换使用。谢谢

Answer 1

在较新的浏览器上，您可以使用 window.getComputedStyle(clickedElement) 来查找背景图像属性。