Question

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

JavaScript＆amp; 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)查找背景图片属性。

Answer 2

根据您的代码，只需在所有浏览器中使用JQuery的文件名或路径：

var withId = $("#image-link").css("background-image").split('(')[1].split(')'),
    withoutId = $("img").attr("src");

    // with id and css file
    console.log(withId[0]);
    // without id and inline style
    console.log(withoutId);

Answer 3

是的，正如Alnitak所说，使用getComputedStyle，但为了与更多浏览器兼容，请查看其他问题：

Get element CSS property (width/height) value as it was set (in percent/em/px/etc)

注意：我希望能够评论另一个用户的好答案，而不是发布我自己的，几乎相同，但有一些额外的信息。不幸的是，我不能，因为stackoverflow不允许小于50代表的用户。所以我必须这样发帖。

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

3 个答案: