javascript - 如何通过javascript更好地将复杂样式写入元素？

Question

我以前用过 jQuery，最近我开始使用 vanilla Javascript，我有点陌生。

鉴于我有以下代码，我怎样才能将它构造成更简洁的代码？请指教。

我有理由将每种背景样式分开，而不是使用 background 本身。我在这里也有一些不使用 CSS 的原因。

我这里的实现是通过 HTML 中的 data 标签进行设置，并使用 javascript 来呈现其样式，而不是使用 CSS。

const section_bg = document.querySelectorAll('.js-section-bg');

for (let i = 0; i < section_bg.length; i++) {
    var this_image = section_bg[i];

    let settings = {
        url: this_image.dataset.bgSrc,
        position: this_image.dataset.bgPosition,
        color: this_image.dataset.bgColor,
        size: this_image.dataset.bgSize,
        repeat: this_image.dataset.bgRepeat
    }

    this_image.style.backgroundRepeat = settings.repeat;
    this_image.style.backgroundSize = settings.size;
    this_image.style.backgroundColor = settings.color;
    this_image.style.backgroundPosition = settings.position;
    this_image.style.backgroundImage = "url('" + settings.url + "')";
}

Answer 1

嗯，你可以这样写:

function $(sel) {
    return Object.assign(
        [].slice.call(document.querySelectorAll(sel), 0),
        {
            css: function (props) {
                this.forEach(function (el) {
                    Object.keys(props).forEach(function (k) {
                        el.style[k] = props[k];
                    });
                });
            }
        }
    );
}

$('div').css({
    backgroundColor: 'red',
    border: '3px solid blue'
});

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

这是否有意义是另一个问题......