如何检查 Child 是否有边界？答案

【问题标题】：How can I check if Child has border?如何检查 Child 是否有边界？
【发布时间】：2019-01-15 03:21:06
【问题描述】：

我必须检查 Child 是否有一个“纯 2px 黑色”的边框，所以我只附加有边框的元素。我该如何检查？

我尝试过使用 source.firstChild.style.border == "solid 2px black" 但它不起作用。

代码笔：https://codepen.io/merisbsc/pen/BvMKBp

## html ##
  <ul id="source" class="object">
      <li id="eins">Name1</li>
      <li id="zwei">Name2</li>
      <li id="drei">Name3<li>
      <li id="vier">Name4</li>
    </ul>


    <div id="moveToTarget" class="object">
      <button type="button" id="name">--></button>
    </div>
    <div id="moveToSource" class="object">
      <button type="button" id="name">
      <--</button>
    </div>

    <ul id="target" class="object">

    </ul>
## js ##
      function moveToTarget() {
        while (source.hasChildNodes()) {
          target.appendChild(source.firstChild);
        }
      }

【问题讨论】：

你有一些 HTML 可以发布吗？
样式是内联的，还是与 CSS/类一起应用的？
样式带有 id 和类
你能把你的代码上传到 Codepen 上吗？所以我们可以帮助你
如果是你申请的课程，你可以检查一下。否则，ComputedStyle 可能需要查看：w3schools.com/jsref/jsref_getcomputedstyle.asp

标签： javascript html css

【解决方案1】：

您必须从他的 css 参数中检查您需要的目标 htmlcollection 中的每个元素（我所理解的），然后您可以用它做任何您想做的事情。

我会怎么做

var style;
//make an htmlcollection of your elements
var divz = document.getElementsByTagName("div");

// parse your htmlcollection to find the one!
for (let e of divz) {
style = window.getComputedStyle(e);
 if(style.getPropertyValue('border') == '2px solid rgb(0, 0, 0)') {
 	console.log(e); //use the "one" as you want 
 }

}

#a {
  width:100px;
  height:100px;
  border:2px solid #000000;
}

<div id='a'>


</div>
<div id='b'>


</div>
<div id='c'>


</div>

【讨论】：

【解决方案2】：

使用getComputedStyle
获取边框样式（这在 Firefox 中比较棘手，如下代码所示）-我使用 Chromium 65 和 Firefox 64 进行了测试
将结果与您期望的值的字符串进行比较。

重要提示：

请注意，使用 CSS 命名的颜色将不起作用，因此您必须将它们转换为 rgb() 颜色语句。分隔符既是逗号也是空格，所以也要注意这一点。
您必须针对您的特定用例和现有代码修改以下内容，但希望这与您所追求的策略相似。

Codepen of the same below

const parent = document.querySelector('.container');
const black = 'rgb(0, 0, 0)'; // spaces matter!
const styleToMatch = '2px solid '.concat(black);

/**
 * Get an element's border styles (simplistic)
 * Tested against Chromium 65 and Firefox 64
 * @param HTMLElement el
 * @return string
 **/
function getElementBorderStyles(el) {
  // exit function if not an HTML Element
  if (! el instanceof HTMLElement) {
    console.warn('el is not an HTMLElement');
    return false;    
  }
  
  // Get the Element's Computed Styles
  const styles = getComputedStyle(el);
  
  // Build the string of border styles
  // Firefox needs to build the string as styles.border is likely empty string, otherwise use styles.border (Chromium 65 tested)
  const borderStyles = (navigator.userAgent.indexOf('Firefox') !== -1)
                       ? ''.concat(styles.borderBlockStartWidth
                         ,' ', styles.borderBlockStartStyle
                         , ' ', styles.borderBlockStartColor)
                       : styles.border;  
  
  return borderStyles;
}

/**
 * Simple string match
 * @param string s1
 * @param string s2
 * @return boolean
 **/
function hasBorderStyleMatch(s1, s2) {
  return s1 === s2;
}

// Convert HTMLCollection to Array using spread operator
// Cycle through the elements to detect a border style match
[...parent.children].forEach( el => {
  // Template Literal for our test output
  const rstr = `.${el.classList} Matches Border Style (${styleToMatch}): ${hasBorderStyleMatch(getElementBorderStyles(el), styleToMatch)}`;
  
  // (Optional) Output to page
  parent.insertAdjacentHTML('afterend', `<p>${rstr}<p>`);
  
  // Log the same
  console.log(rstr);
});

p {
  margin: 0.2rem;
  font-size: 0.75rem;      
}

div:first-of-type {
  margin: 1rem;  
}

div {
  min-height: 1rem;  
}

.has-border {
  border: solid 2px black;
}

<div class="container">
  <div class="has-border"></div>
  <div class="no-border"></div>  
</div>

【讨论】：