CODEWITHSUNDEEP
htmlcsspropertiesattributes
LVX-001
LVX-001

Reputation: 56

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

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.

Upvotes: 0

Views: 2207

Answers (1)

McKabue
McKabue

Reputation: 2222

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

Upvotes: 1

Related Questions