Dynamically Change Element Styles

function updateElementStyle(elementId, styleProperty, value) {
  const element = document.getElementById(elementId);
  if (element) {
    // Note: CSS property names like 'background-color' become 'backgroundColor' in JavaScript
    element.style[styleProperty] = value;
    console.log(`Style property '${styleProperty}' set to '${value}' for element '${elementId}'.`);
  } else {
    console.error(`Element with ID '${elementId}' not found.`);
  }
}

function getElementStyle(elementId, styleProperty) {
  const element = document.getElementById(elementId);
  if (element) {
    // For inline styles, use .style property
    const inlineValue = element.style[styleProperty];
    console.log(`Inline style '${styleProperty}' on '${elementId}': '${inlineValue}'.`);

    // For computed (final) styles, use getComputedStyle
    const computedStyle = window.getComputedStyle(element);
    const computedValue = computedStyle[styleProperty];
    console.log(`Computed style '${styleProperty}' on '${elementId}': '${computedValue}'.`);

    return { inline: inlineValue, computed: computedValue };
  } else {
    console.error(`Element with ID '${elementId}' not found.`);
    return null;
  }
}

// Example usage:
// Assume you have an HTML element: <div id="myStyledDiv" style="width: 100px; height: 100px; background-color: blue;"></div>

// Change background color:
updateElementStyle('myStyledDiv', 'backgroundColor', 'red');

// Change width and add a border:
updateElementStyle('myStyledDiv', 'width', '200px');
updateElementStyle('myStyledDiv', 'border', '2px solid green');

// Get current styles:
const colorInfo = getElementStyle('myStyledDiv', 'backgroundColor');
const widthInfo = getElementStyle('myStyledDiv', 'width');