[英]retrieve background image from css using javascript without using it's ID
I've looked around and it's been hard to find a thread that does what I want it to do. 我环顾四周,很难找到一个能做我想做的事情的线程。 As far as I am concerned, I don't even know if it's possible.
就我而言,我甚至不知道是否可能。 What I am looking to do is to retrieve the background image file name (especially if it is a link) when it is click.
我想要做的是在点击时检索背景图像文件名(特别是如果它是一个链接)。 I have a script that logs all click but the last piece I need is the background-image name (file-path with name would even do) stored in the CSS file.
我有一个记录所有点击的脚本,但我需要的最后一块是存储在CSS文件中的背景图像名称(文件路径,名称甚至可以)。 Anyone have an idea or a solution as to how this can be done without using a div or class?
任何人都有一个想法或解决方案,如何在不使用div或类的情况下完成此操作? Here's what I have right now:
这就是我现在所拥有的:
JavaScript & HTML 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: CSS:
#image-link {
background-image:url('untitled.jpg');
width: 50px;
height:50px;
border: 1px solid #000000;
}
This is a test file that will be converted for use in the near future. 这是一个测试文件,将在不久的将来转换使用。 Thanks
谢谢
在较新的浏览器上,您可以使用window.getComputedStyle(clickedElement)
来查找背景图像属性。
As per your code, just the filename or the path using JQuery in all browsers: 根据您的代码,只需在所有浏览器中使用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);
Yes, as Alnitak says, use getComputedStyle
, but for compatibility with more browsers check out this other question: 是的,正如Alnitak所说,使用
getComputedStyle
,但为了与更多浏览器兼容,请查看另一个问题:
Get element CSS property (width/height) value as it was set (in percent/em/px/etc) 获取设置的元素CSS属性(宽度/高度)值(以百分比/ em / px /等为单位)
Note: I would love to be able to comment on another user's good answer instead of posting my own that is pretty much the same but with a little additional info. 注意:我希望能够评论另一个用户的好答案,而不是发布我自己的,几乎相同,但有一些额外的信息。 Unfortunately, I cannot because stackoverflow doesn't permit this for a user with less than 50 rep.
不幸的是,我不能,因为stackoverflow不允许小于50代表的用户。 So I have to post it like this instead.
所以我必须这样发布它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.