Manipulating css using attr() and data tags

Question

I have a div class like so:

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

I have javascript that changes the data-content:

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

And I have my css declaration like this:

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

For some reason, I can't get the padding-top to work correctly. Is there something I doing wrong?

what is the relation between the css and that data attribute?? — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented May 3, 2016 at 15:18
@RajaprabhuAravindasamy On click I grab an image. I then determine it's real width and height and divide the 2. I want to make that value the padding-top so that I can make .website-wrapper have the right ratio for the image responsively. — bryan
– bryan, Commented May 3, 2016 at 15:20
The first thing to check is: Is the attribute getting updated with the value you expect? — T.J. Crowder
– T.J. Crowder, Commented May 3, 2016 at 15:23
Maybe imageHeight or imageWidth return undefined? Did you check this? — user3470625
– user3470625, Commented May 3, 2016 at 15:23
The attr() function can be used with any CSS property, but support for properties other than content is experimental. Reference — zgood
– zgood, Commented May 3, 2016 at 15:24

t1m0n · Accepted Answer · 2016-05-03 15:24:48Z

3

As far as I know attr works only with content property currently, so you can manipulate only it. You can see browser compatibility here and more detail info - 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>

answered May 3, 2016 at 15:24

t1m0n

3,4411 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zgood · Accepted Answer · 2016-05-03 16:00:37Z

If you include a wrapping div you could use that to set your padding-top to maintain you aspect ratio. Just set that wrapping div to position: relative; and the inner div with the background-image can be set to position: absolute; top:0; bottom: 0; left: 0; right: 0; in order to take up the full space of the containing div which is creating the aspect ratio.

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.

Collectives™ on Stack Overflow

Manipulating css using attr() and data tags

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related