Question

基于this question and answers，我尝试以一种将其用于单个元素的方式来更改代码。

例如，对于我单击的border-radius元素，我想接收div的CSS部分。我必须在函数getCssByRule()中进行什么更改才能使其起作用？

$(document).on('click', '.myclass', function(e) {
  var css_now = getCssByRule('border-radius', this);
}

function getCssByRule(rule, element) {
  const values = Array.from(document.querySelectorAll('*'))
    .filter(e => parseInt(window.getComputedStyle(e).getPropertyValue(rule)) !== 0)
    .map(e => window.getComputedStyle(e).getPropertyValue(rule));

  return values;
}

console.log('getCssByRule' + getCssByRule('margin-left', element));

Answer 1

如果您纠正语法错误，则您的代码有效。为此，请在)块中添加丢失的on()，并在超出范围时删除引用console.log()的{{1}}。如果要查看CSS属性的值，请在点击事件处理程序中放入element。

console.log()

$(document).on('click', '.myclass', function(e) {
  var radius = getCssByRule('border-radius', this);
  console.log(radius);
});

function getCssByRule(rule, element) {
  const values = Array.from(document.querySelectorAll('*'))
    .filter(e => parseInt(window.getComputedStyle(e).getPropertyValue(rule)) !== 0)
    .map(e => window.getComputedStyle(e).getPropertyValue(rule));

  return values;
}

.myclass {
  border-radius: 10px;
  padding: 10px;
  background-color: #C00;
  color: #FFF;
}

话虽这么说，您正在使它变得比所需复杂得多。您已经包括jQuery来附加<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="myclass">Foo</div>事件处理程序，那么为什么不使用它来获取click的CSS设置呢？这是单线的：

border-radius

$(document).on('click', '.myclass', function(e) {
  var css_now = $(this).css('border-radius');
  console.log(css_now);
});

.myclass {
  border-radius: 10px;
  padding: 10px;
  background-color: #C00;
  color: #FFF;
}

如何更改此代码以使用给定元素

1 个答案: