Bookmarklet：试图找出如何识别和更改网页上的图像的网页

我对JavaScript有一个非常基本的理解，并设法创建一个小书签上一个子目录并替换目录名称。Bookmarklet：试图找出如何识别和更改网页上的图像的网页

代码：

javascript:(function(){var pathArray=window.location.pathname.split('/');var newPathname=pathArray[0]+"/"+pathArray[1]+"/"+pathArray[2]+"/"+pathArray[3]+"/"+pathArray[4]+"/s2450-k/";document.location.href=newPathname;})()

基本上，它做什么，是要打破的URL，在Blogspot，Picasa网络相册或Google+相册中的图片，并与最大尺寸（高达2450x2450）

更换因此图像的URL：

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s640/blah.JPG

被转换为：

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s2450-k/

现在，这只有我使用“打开图像在新标签”选项，使用书签，因为我使用document.location之前。

我想直接在网页/博客上查看图像，而无需单独打开每个图像。

我在找出如何明确识别标签并通过书签在页面上运行上述功能的帮助，而不是首先单独打开每个图像？

此外，我不确定如何只改变我感兴趣的图像而不是所有图像，因为如果我盲目地做这些事情，标志和背景等东西就会中断。当然，我并不介意，但我的第二个目标是学习如何识别哪个是哪个，并使之无缝。

也许一旦我运行小书签，我可以捕获onclick并以某种方式将该函数仅应用于鼠标光标下的元素？

来源

2013-01-04 user1948345

存在document.getElementByTagName('img')，返回页面上的所有<img>; src的属性现在可以用你在问题中编写的例程进行修改（显然你必须检查URL是否对你有兴趣，也许在域部分使用正则表达式）。

来源

2013-01-04 12:17:43 gipi

您可以使用CSS属性选择器仅选择要更改的图像，然后您可以遍历这些图像并将其应用于相关图像。

var images = document.querySelectorAll('img[src*="http://common.part.of.image.src"]') 

Array.prototype.forEach.call(images, function (img) { 
    img.src = yourFunctionThatChangesUrls(img.src) 
})

document.querySelectorAll是在现代浏览器可用，并允许您选择指定选择器匹配的页面上的所有元素。

假设您试图更改的图像有一部分url是共同的，您可以使用*=属性选择器。这意味着[src*="foo"]将匹配包含foo任何地方的src的任何东西，可能是有用的。

一旦你有了图像，你就可以在每个匹配元素上使用你的函数。

来源

2013-01-04 12:31:08

Bookmarklet：试图找出如何识别和更改网页上的图像的网页

回答

相关问题