How do I use an elements' attribute value as a css property? CSS3

Question

HTML

<canvas id="canvas" width="800" height="600">
</canvas>

<div class="content"></div>

CSS

div.content {
  :root {
    --xPos: canvas[id="canvas"].width/2;
}   
  position: absolute;
  left: var(--xPos);
  bottom: 100px;
}

I tried using an attribute selector to get the canvas.id.width value so I can set the left margin edge property for div.content to the canvas' width/2. However, it seems like attribute selectors are used to style elements with specific attributes/values rather than to return an attribute value.

is there a way(function/method) to use a HTML attribute value as a property value within CSS? and then use it in expressions like in JS such as attrValue*2 or attrValue/2.

Thanks.

McKabue · Accepted Answer · 2019-11-17 02:15:31Z

1

This is not yet widely supported in most browsers, see attr()

If its just a layout issue in different viewports, try to use CSS calc() and/or Media Queries

If its some behavior you want, try using JavaScript for that. With javascript, you could actually create the styles dynamically with whatever values you want, see Set CSS styles with javascript

answered Nov 17, 2019 at 2:15

McKabue

2,2921 gold badge22 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

How do I use an elements' attribute value as a css property? CSS3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related