Question

我有一个像这样的div类：

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

我有javascript更改了data-content：

$(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正常工作。有什么我做错了吗？

Answer 1

据我所知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>

Answer 2

如果您添加了包装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)+"%");

See this fiddle for a demo.

使用attr（）和数据标记处理css

2 个答案: