javascript - 如何使用 Javascript 在 CSS 中隐藏和检索 URL

Question

在 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 Polyfill 是如何工作的？因为它们允许您使用通常在浏览器中无效的 CSS 属性和值，那么 javascript 如何访问 CSS？

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

Answer 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>