使用attr(）和数据标记操作css

Manipulating css using attr() and data tags

本文关键字：操作 css 数据 attr 使用      更新时间：2023-09-26

我有一个类似的div类：

<div class="website-wrapper" data-content="63%"></div>

我有更改data-content:的javascript

$(this).children().closest('.website-wrapper').attr('data-content', (imageHeight/imageWidth*100)+"%");

我的css声明是这样的：

.website-wrapper:after { padding-top: attr(data-content); display: block; content: ''; }

由于某些原因，我无法使padding-top正常工作。我做错什么了吗？

据我所知，attr目前只能与content属性一起工作，所以你只能操作它。你可以在这里看到浏览器兼容性和更多详细信息-https://developer.mozilla.org/en-US/docs/Web/CSS/attr

.website-wrapper:after {
  content: attr(data-content);
}
<div class="website-wrapper" data-content="Hello"></div>

如果包含包装div，则可以使用它来设置padding-top以保持纵横比。只需将包装div设置为position: relative;，可以将带有background-image的内部div设置为position: absolute; top:0; bottom: 0; left: 0; right: 0;，以占用创建纵横比的包含div的全部空间。

HTML

<div class="outer">
  <div class="website-wrapper"></div>
</div>

CSS

.outer{
  position:relative;
}
.website-wrapper{
  background-image: url('https://placehold.it/800x450');
  background-repeat: no-repeat;
  background-size:contain;
  position:absolute;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  border:1px solid red;
}

JS-

$(this).children().closest('.outer').css('padding-top', (imageHeight/imageWidth*100)+"%");

请看这把小提琴的演示。

相关文章：