实现一个函数 css(element, style)，设置或获取 DOM 元素的样式

推荐答案

// www.javascriptcn.com code example
function css(element, style, value) {
    if (value === undefined) {
        // 获取样式
        return window.getComputedStyle(element)[style];
    } else {
        // 设置样式
        element.style[style] = value;
    }
}

本题详细解读

功能描述

css(element, style, value) 函数用于设置或获取 DOM 元素的样式。当传入 value 参数时，函数会设置 element 的 style 属性为 value；当不传入 value 参数时，函数会返回 element 的 style 属性的当前值。

参数说明

• element: 需要操作样式的 DOM 元素。
• style: 需要设置或获取的样式属性名称（如 'color'、'font-size' 等）。
• value: 可选参数，表示要设置的样式值。如果未传入该参数，则函数会返回当前样式值。

实现细节

1. 获取样式：当 value 参数未传入时，函数使用 window.getComputedStyle(element) 方法获取元素的最终样式（包括内联样式、外部样式表等），并返回指定样式属性的值。
2. 设置样式：当 value 参数传入时，函数直接通过 element.style[style] = value 设置元素的内联样式。

示例用法

const div = document.querySelector('div');

// 设置样式
css(div, 'color', 'red');

// 获取样式
const color = css(div, 'color');
console.log(color); // 输出: 'red'

注意事项

• window.getComputedStyle 返回的样式值是只读的，不能直接修改。
• 如果样式属性名中包含连字符（如 font-size），需要使用驼峰命名法（如 fontSize）来访问或设置样式。