主页 / 问题 / 1595642
Accepted
drako black
Asked:2024-10-04 16:01:20 +0000 UTC2024-10-04 16:01:20 +0000 UTC

多次访问时一个对象的多种样式[关闭]

  • 772

所以，我有一个对象：

<div id="block"></div>

我需要为其分配一些属性。通常我用这个style，但是出现了一个问题：如果我style多次访问同一个元素，以前的设置将被覆盖：

document.getElementById('block').style.opacity='1';
document.getElementById('block').style.border='1';
document.getElementById('block').style.color='black';

那么，问题是如何突破这个限制呢？

js 中是否可以直接使用 CSS 数据，或者如何添加属性，style以便这些更新不会覆盖其中包含的其他属性？

javascript

1 个回答

  1. Best Answer

    element.style.property = 'value'不会覆盖所有内联样式，而只会更改您指定的特定属性。文档证实了这一点：

    “要添加特定于元素的样式而不更改其他样式值，通常最好在 CSSStyleDeclaration 对象上设置单独的属性。”

    例如，每个单独的分配element.style.opacity = '1';实际上仅添加或更改该属性，而不会影响其他属性。

    但是，当您尝试将整个样式设置为字符串（例如使用 ）时，就会出现问题element.style = "border: 1px solid black; color: red;"。在这种情况下，所有以前的内联样式实际上都会被完全覆盖，因为字符串被传递到cssTextstyles 对象中。这是文档的以下段落中所述的内容：

    “以这种方式使用样式将完全覆盖元素上的所有内联样式。”

    简而言之，如果您使用单个属性（如示例所示），则不会覆盖所有样式

    管理样式的替代方法

    1. cssText
    let block = document.getElementById('block');
block.style.cssText += 'opacity: 1; border: 1px solid black; color: black;';
//Важно: если забыть про +=, то все предыдущие стили будут потеряны
    1. setProperty
    let block = document.getElementById('block');
block.style.setProperty('opacity', '1');
block.style.setProperty('border', '1px solid black');
block.style.setProperty('color', 'black');


    let block = document.getElementById('block');
block.classList.add('new-style');
    .default-style {
  opacity: 1;
  border: 1px solid red;
  color: red;
}

.new-style {
  opacity: 1;
  border: 1px solid black;
  color: black;
}
    <div id="block" class="default-style"></div>

    4.

    Object.assign(block.style, {
  opacity: '1',
  border: '1px solid black',
  color: 'black'
});

    let style = document.createElement('style');
style.textContent = '#block { opacity: 1; border: 1px solid black; color: black; }';
document.head.append(style);

    let block = document.getElementById('block');
block.setAttribute('style', block.getAttribute('style') + '; opacity: 1; border: 1px solid black;');

    结论：我认为

    setProperty, cssText- 灵活高效的方式处理大量样式

    • 0

相关问题