时间戳

首页 > 解决方案 > attr() 可以读取子元素的属性吗？

html - attr() 可以读取子元素的属性吗？

问题描述

An<img>有一个父级 ( <div>)，我希望父级具有属性 ( )img的背景图像。因此，如果可能的话，我想尝试在 CSS 中为父级读出子级 ( ) 的属性。srcassets/picture.pngimg

/*pseudo css*/
div {
   background-image:url(attr(img src));
}

<!--html-->
<div>
    <img src="assets/picture.png"/>
</div>

标签： htmlcss

解决方案

为此，您必须使用 JavaScript 或 jQuery。这是一个简单的jQuery解决方案：

$("div").css("background-image", `url${$("div img").attr("src")}`);

纯 JavaScript (ES6)：

document.querySelector("div").style.backgroundImage = `url${document.querySelector("div img").getAttribute("src")}`;

纯 JavaScript (ES5)：

document.querySelector("div").style.backgroundImage = "url" + document.querySelector("div img").getAttribute("src");

推荐阅读