css attr mit Manipulieren() und Daten-Tags

Question

Ich habe ein div class wie so:

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

ich haben Javascript, das die data-content ändert:

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

Und ich habe meine CSS-Erklärung wie diese :

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

---

Für einige r Eason, ich kann die padding-top nicht richtig funktionieren. Gibt es etwas, was ich falsch mache?

Answer 1

Soweit ich weiß attr funktioniert nur mit content Eigenschaft derzeit, so dass Sie nur manipulieren können. Sie können Browser-Kompatibilität finden Sie hier und mehr Detailinfo - 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

Wenn Sie ein DIV umfassen Sie, dass Ihre padding-top setzen verwenden könnten Sie Seitenverhältnis beibehalten. Setzen Sie einfach das Wrapping div auf position: relative;, und das innere div mit der background-image kann auf position: absolute; top:0; bottom: 0; left: 0; right: 0; gesetzt werden, um den vollen Raum des enthaltenden div, das das Seitenverhältnis erstellt, aufzunehmen.

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.