0

我环顾四周，很难找到一个可以做我想做的事情的线程。就我而言，我什至不知道这是否可能。我要做的是在单击时检索背景图像文件名（特别是如果它是链接）。我有一个记录所有点击的脚本，但我需要的最后一块是存储在 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;
}

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

4

3 回答 3

2

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

于 2013-08-08T14:10:30.897 回答
0

根据您的代码，只需在所有浏览器中使用 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);
于 2013-08-08T14:26:16.057 回答
0

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

获取设置的元素 CSS 属性（宽度/高度）值（以百分比/em/px/等为单位）

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

于 2013-08-08T14:26:35.167 回答