Get an Element's Final Computed CSS Styles

/**
 * Retrieves the final computed CSS style value for a given property of an element.
 * @param {HTMLElement} element - The target DOM element.
 * @param {string} propertyName - The CSS property name in camelCase (e.g., 'backgroundColor', 'fontSize').
 * @returns {string} The computed value of the CSS property.
 */
function getComputedStyleValue(element, propertyName) {
  if (!(element instanceof HTMLElement)) {
    console.error('Invalid element provided. Must be an HTMLElement.');
    return '';
  }
  if (typeof propertyName !== 'string' || propertyName.trim() === '') {
    console.error('Invalid propertyName provided. Must be a non-empty string.');
    return '';
  }

  // getComputedStyle returns a CSSStyleDeclaration object
  const computedStyles = window.getComputedStyle(element);

  // Convert camelCase to kebab-case for getPropertyValue for robustness.
  const cssPropertyName = propertyName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

  return computedStyles.getPropertyValue(cssPropertyName);
}

// Example Usage:
// <p id="myParagraph" style="color: blue; font-size: 16px; margin-left: 10px;"></p>
// const paragraph = document.getElementById('myParagraph');
//
// // In your CSS file: consistent with the problem statement
// // p {
// //   background-color: lightgray;
// //   padding: 20px;
// //   font-weight: bold;
// // }
//
// if (paragraph) {
//   console.log('Color:', getComputedStyleValue(paragraph, 'color')); // blue (from inline style)
//   console.log('Background Color:', getComputedStyleValue(paragraph, 'backgroundColor')); // lightgray (from stylesheet)
//   console.log('Font Size:', getComputedStyleValue(paragraph, 'fontSize')); // 16px (from inline style)
//   console.log('Padding:', getComputedStyleValue(paragraph, 'padding')); // 20px (from stylesheet)
//   console.log('Margin Left:', getComputedStyleValue(paragraph, 'marginLeft')); // 10px (from inline style)
//   console.log('Font Weight:', getComputedStyleValue(paragraph, 'fontWeight')); // bold (from stylesheet)
//
//   // Note: For properties like 'display', 'position', etc.
//   console.log('Display:', getComputedStyleValue(paragraph, 'display')); // block (default for p)
// }