Question

我必须检查Child是否具有“纯2px黑色”边框，因此我仅附加具有边框的Elements。我该如何检查？

我尝试使用source.firstChild.style.border ==“纯2px黑色”，但是它不起作用。

CodePen：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);
        }
      }

Answer 1

您必须检查目标htmlcollection中的每个元素，从他的css param（我所了解的）中找出所需的元素，然后您就可以使用它进行任何操作。

我会怎么做

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>

Answer 2

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

重要说明：

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

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>

如何检查孩子是否有边界？

2 个答案: