如何使用 Javascript 在 CSS 中隐藏和检索 URL答案

【问题标题】：How to hide and retrieve a URL in CSS with Javascript如何使用 Javascript 在 CSS 中隐藏和检索 URL
【发布时间】：2014-11-19 12:59:30
【问题描述】：

在 CSS 中，我希望能够为给定的选择器指定背景图像，而无需实际下载或呈现它。然后，我希望能够使用 javascript 读取图像 URL，在 js 中对其进行修改，然后将修改后的 URL 真正应用于选择器，以便实际下载和显示。（我想最后一部分必须通过 jQuery 直接更改每个元素的样式来完成，但这不是这个问题的意义所在。）这是我试图制作非常简单的响应式图像的一些狡猾的事情的一部分。

我试过了：

.sneaky {
    background: url("youcantseemeyet.jpg");
    background-image: url("blank.jpg");
}

但我找不到让 javascript 了解原始背景属性的方法。

也试过了：

.sneaky:after {
    background: url("youcantseemeyet.jpg");
}

但我不认为 javascript 可以看到伪元素。

也试过了：

.sneaky {
    x-background: url("youcantseemeyet.jpg");
}

和：

.sneaky {
    background: x-url("youcantseemeyet.jpg");
}

但我认为 javascript 只是将自定义属性/值扔出窗口。

CSS Polyfills 是如何工作的？因为它们允许您使用通常在浏览器中无效的 CSS 属性和值，那么 javascript 是如何访问 CSS 的呢？

另一个想法：我不认为有办法用 javascript 抢占 CSS，阅读 url() 但阻止文件下载，是吗？

【问题讨论】：

最简单的解决方案：在 JavaScript 中生成一个新的<style> 标签，用你想要的任何东西填充它，然后把它塞进<head>。无需阅读 CSS 或特别偷偷摸摸，除非您有其他理由。否则，这是一个 XY 问题。如果你真的，真的想阅读 CSS 规则，stackoverflow.com/questions/324486/…
我希望能够在您通常声明背景图像的位置或附近使用 CSS 声明 URL。

标签： javascript css responsive-design

【解决方案1】：

我赞成这个问题，因为你有这样做的动机。响应式图像大小调整以提高性能是减少下载字节数而不影响页面质量的好方法。

这是一种方法：http://codepen.io/anon/pen/bNGgLZ

您可以使用 html5 数据属性来存储 url（以便最初不会下载图像），然后使用 javascript 根据窗口大小应用图像大小

<div class="sneaky" data-url="img_test.png">abcd</div>
<style>
.sneaky {
 background: #000 url("transparent_placeholder.png");
 color:#fff;
}
</style>

<script>
var el = document.querySelector(".sneaky");
alert(el.getAttribute("data-url"));

//Decide image size based on client window size and then assign backgroundImage property to download it from server
var size = "smaller";
el.backgroundImage = "url("+size+"_img_test.png)"
</script>

【讨论】：

谢谢。我希望找到一种在样式表中声明背景图像的方法，就像您通常那样。对于实际的<img>s，我会使用这样的解决方案。另外我打算根据元素大小而不是屏幕大小来选择图像大小。我知道我可以只使用媒体查询来选择不同大小的图像，但我希望有更自动化的东西。
元素大小是如何决定的？反应灵敏？您希望在一个页面（或整个网站）中拥有多少张图片？
这应该是任何人在网站上任意数量的图像上使用的通用解决方案。你的意思是元素大小是如何决定的？
当你说“根据元素大小选择图像大小”时，你的意思是元素是响应式的吗？
元素可以是响应式的，可以是流动的，也可以是固定的。关键是 javascript 会读取它的宽度，无论它是如何设置的，并获得适合的图像。

【解决方案2】：

您可以使用背景位置属性将图像从渲染区域中移除并使用 window.getComputedStyle 检索 url

CSS

.sneaky {
    background-image:url(youcantseemeyet.jpg);
    background-position:-9999px -9999px;
}

Javascript

var url=window.getComputedStyle(document.querySelector('.sneaky'),null).backgroundImage

如果您想为 .sneaky 应用第二个背景图像，最好包含一个没有填充/边距的子 div 并为其应用第二个背景

【讨论】：

但我说我想避免下载图像。关键是将高分辨率图像放在 CSS 中，并让 javascript 获取缩小版本以适应图像所在的任何框。

【解决方案3】：

我想出了该怎么做。现在想想就明白了。只需在查询字符串中隐藏所需的 URL，例如：url('/img/placeholder.gif?/path/to/real/image.jpg')。啊，查询字符串，我喜欢它们。

更新使用查询字符串的一个问题是每个唯一的查询字符串仍然会产生一个新的 HTTP 请求，即使它最终返回的是相同的资源。因此，您也可以使用井号，例如url('/img/placeholder.gif#/path/to/real/image.jpg')。当请求图像时，它将完全忽略哈希标记部分，但您仍然可以使用 javascript 检索该信息。这有点棘手。假设您没有其他带有哈希标签的 URL（因为您为什么会这样），您可以简单地检索所有样式表中所有选择器的列表，这些样式表确实使用以下脚本的哈希标签部分。

var selection = []
  , sheets = document.styleSheets
  , sheet, rule, i, j

for (i in sheets){
    sheet = sheets[i]
    for (j in sheet.cssRules) {
        rule = sheet.cssRules[j]
        if (/url\(.*#.*\)/.test(rule.cssText)) selection.push( rule.selectorText );
    }
}

【讨论】：