Question 194335 in CSS Question posted in
Some basic documentation can be found here.

Css – Values of background shorthand property wrongly expanded when trying to call HTMLElement.style

In styles for an element I have a few inline CSS declarations including a shorthand declaration for background

<style>
  :root{
    --bg-white: rgba(255, 255, 255, 0);
  }
</style>

<div style="background: var(--bg-white); ... "></div>

but when iterating over HTMLElement.style the shorthand property looks like it’s wrongly expanded

 for (const declaration of Array.from(target.style)) { 
   const value = target.style.getPropertyValue(declaration)

   console.log(`${declaration}: ${value}`)
 }

This should print out background-color: var(--bg-white) per HTMLElement.style documentation on MDN, but I get background-color: ''

Shorthand properties are expanded. If you set style="border-top: 1px solid black", the longhand properties (border-top-color, border-top-style, and border-top-width) are set instead.

Has anyone encountered this before?

Tags:

2

Answers


  1. 0

    UPDATE the OP commented that he/she wants to get just the string value of the CSS rule. In our case that’s just a matter of getting and parsing the style attribute.

    For more complex scenario for getting CSS rules from <style> refer to my another answer : Get the formula of a CSS value instead of the calculated value in JavaScript

    p{
  color:yellow
}
    <style>
:root{
  --bg-white: black;
}
</style>
<p style="--border: 5px solid red; border: var(--border);background: var(--bg-white); padding: 10px">Test</p>

<script>

 const target = document.querySelector('p');
 
 // get all rules as an object:
  
 const style = target.getAttribute('style');
 const regex = /((?:[w-])[wd-]+)s*:s*([^;]+)/g;
 const rules = {};
 
 let m;
 while(m = regex.exec(style)){
  rules[m[1]] = m[2];
 }
 
 console.log(rules.background);

</script>

    The previous answer:

    Use getComputedStyle() to get the computed value. The shorthand properties are expanded the same way as in style.

    The style contains only inline styles assigned to the element and doesn’t calculate any css properties (inline and inherited). So the background-color is empty in that case.

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

    p{
  color:yellow
}
    <style>
:root{
  --bg-white: black;
}
</style>
<p style="--border: 5px solid red; border: var(--border);background: var(--bg-white); padding: 10px">Test</p>

<script>

 const target = document.querySelector('p');
 console.log('getComputedStyle (global css property):', getComputedStyle(target).backgroundColor);
 console.log('getComputedStyle (global style):', getComputedStyle(target).color);
 console.log('getComputedStyle (inline css property):', getComputedStyle(target).borderColor);
 console.log('style (global css property):', target.style.backgroundColor);
 console.log('style (global style):', target.style.color);
 console.log('style (inline style):', target.style.padding);
 console.log('style (inline css property):', target.style.borderColor);

</script>
    Login or Signup to reply.
  2. 0

    This should print out background-color: var(–bg-white) per HTMLElement.style documentation on MDN, but I get background-color: ”

    If you use HTMLElement.style, it will return what is directly applied (not computed) through the styleattribute.

    In that case the browser can’t know what the var(...) in background: var(--bg-white); will resolve and to which background-... properties it will contain (The contents of the variable will be placed where the var(...) statement is and then the resulting value will be parsed.

    So if you e.g. have --bg-white: content-box radial-gradient(crimson, skyblue); then your --bg-white will actually influence multiple properties.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search