Question

我正在尝试优化我的JavaScript代码，但是我被卡住了。

我有两组CSS属性，分别有两个JavaScript函数可以按其应有的方式工作-请检查此演示：

每个组代表身体元素的不同属性。

在这种情况下还可以，但是我试图为此解决一个通用功能-我有这样的东西：

function universal(color) {
  const selectedColor = color.value;
  const selectedProperty = color.name;
  const testSelection = document.querySelectorAll(`[name=${selectedProperty}`);

  for (let i = 0; i < testSelection.length; i++) {
    if (testSelection[i].checked) {
      document.body.style.cssText = `${selectedProperty}: ${selectedColor};`;
    }
  }
}

<p>Background Color</p>
<input type="radio" id="red" value="red" name="background-color" onclick="universal(this)" checked/>
<label for="red">red</label><br>
<input type="radio" id="green" value="green" name="background-color" onclick="universal(this)" />
<label for="green">green</label>

<p>Color</p>
<input type="radio" id="blue" value="blue" name="color" onclick="universal(this)" checked/>
<label for="blue">blue</label><br>
<input type="radio" id="orange" value="orange" name="color" onclick="universal(this)" />
<label for="orange">orange</label>

https://codepen.io/anon/pen/xNbdJg

问题是它覆盖了我的CSS属性，而不是添加它们。我知道.style.cssText是这样工作的，所以我需要针对该问题的不同解决方案。

理想的解决方案是这种情况：

在selectedProperty下，我有颜色/背景色（取决于我单击的组）
这样的代码将是完美的：document.body.style.selectedProperty = selectedColor;

但是我当然不能那样做。

在这种情况下，您知道使用存储在变量下的值的某种方法吗？

我希望我能实现的目标是可以理解的。

Answer 1

您可以使用它来编辑主体的CSS属性，同时保留现有属性：

document.body.style[selectedProperty] = selectedColor

下面的完整示例：

function universal(color) {
  const selectedColor = color.value;
  const selectedProperty = color.name;
  const testSelection = document.querySelectorAll(`[name=${selectedProperty}`);

  for (let i = 0; i < testSelection.length; i++) {
    if (testSelection[i].checked) {
      document.body.style[selectedProperty] = selectedColor;
    }
  }
}

<p>Background Color</p>
<input type="radio" id="red" value="red" name="background-color" onclick="universal(this)" checked/>
<label for="red">red</label><br>
<input type="radio" id="green" value="green" name="background-color" onclick="universal(this)" />
<label for="green">green</label>

<p>Color</p>
<input type="radio" id="blue" value="blue" name="color" onclick="universal(this)" checked/>
<label for="blue">blue</label><br>
<input type="radio" id="orange" value="orange" name="color" onclick="universal(this)" />
<label for="orange">orange</label>

Answer 2

如果您只想添加 document.body.style.cssText上尚不存在的属性，则可以尝试：

document.body.style.cssText += "whatever-property: whatever-color;"

Answer 3

您可以尝试使用jquery https://codepen.io/arindamx01/pen/8e54e55e231595ba7f4e01e5a0bf8351?editors=1010

$('input').on('click', function(){
  $("input").each(function(){
   if( $(this).prop("checked")){
     var popCss = $(this).attr('name');
     var val = $(this).val();
     $('body').css(popCss, val);
   }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Background Color</p>
      <input type="radio" id="red" value="red" name="background-color" checked/>
      <label for="red">red</label><br>
      <input type="radio" id="green" value="green" name="background-color" />
      <label for="green">green</label>

      <p>Color</p>
      <input type="radio" id="blue" value="blue" name="color" checked/>
      <label for="blue">blue</label><br>
      <input type="radio" id="orange" value="orange" name="color" />
      <label for="orange">orange</label>

如何在现有的CSS属性中添加一些属性？

3 个答案: