小编con*_*exo的帖子

在每篇文章之间,我有一个水平分隔符:

.article {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

<div id="articles">
    <div class="article">Hello1</div>
    <div class="article">Hello2</div>
    <div class="article">Hello3</div>
    <div class="article">Hello4</div>
</div>

如何用CSS删除最后一个孩子之后无用的水平线#articles？(没用,因为没有下一篇文章,所以不需要分离)

例如在Chrome或Firebug中打开控制台.请尝试以下方法:

console.log(0 >= null); /* true, so let's look closer: */
console.log(0 > null);  /* false, so it's got to be equal, right? */
console.log(0 == null); /* false again?? */

http://jsbin.com/royicecidi/1/edit?js,console

那么,如果0 既不大也不相等,0怎么能大于或等于 0 null？ >= >

在我们当前的项目中使用knockout.js,我们已经多次来到这一点.

如何在Knockout应用页面上的所有绑定后才能确保执行某些Javascript代码？

在我的特定用例中,我使用if-bindings来评估一些配置选项,并决定是否应该渲染内部元素(=在DOM中).只有在if评估了这些绑定之后,我才需要计算某个元素中DOM节点的数量.显然,如果我太早计算 - if-dingdings还没有删除那些不需要的DOM节点,那么计数就会产生错误的结果.

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

编辑:我没有意识到错误消息甚至不是来自ESLint,而是来自Visual Studio Code中的 [js] .我会删除这个问题,但它可能会帮助其他人误解ESLint的[js]输出.仍然很想知道这[js]件事是什么样的过程.

我被告知要定义一个项目范围的.eslintrc.js文件,以确保团队的代码符合通用标准.

使用预设运行ESLint eslint:recommended会给出以下错误消息

The property "parentNode" does not exist for the type "EventTarget".

这是有问题的代码:

window.addEventListener('keydown', event => {
  const currentTag = event.target.parentNode.tagName;
  /* ... */
})

我知道可能有event.targets 不是 HTMLElement s,但我应该如何编码 - 或配置ESLint - 所以这一行不再产生ESLint错误？只要ESLint报告任何错误,我们就计划让构建失败,因此必须解决这个问题.

导致类似错误的第二行代码:

document.activeElement.click();

导致ESLint错误

The property "click" does not exist for the type "Element".

第三个例子:

const rows = this.childNodes[1].querySelectorAll('tr');

投

The property "querySelectorAll" does not exist for the type "Node & ChildNode". …

我有一个<my-el>结构与此类似的自定义元素（纯静态的、服务器呈现的 HTML）：

<my-el>
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</my-el>

由于 Chrome 不保证connectedCallback自定义元素的子元素可用性，我使用HTMLParsedElement它基本上使用以下步骤延迟自定义元素初始化：

1. 测试元素（或任何祖先元素）是否具有nextSibling（在这种情况下解析器可能已经通过my-el），或者是否DOMContentLoaded已经到达（又名document.readyState !== 'loading'）。
2. 如果以上都不是，设置一个MutationObserver就childList重新检查以上条件。

概述的策略目前仍然存在的问题是，MutationObserver当这是可用的 HTML 时，可能会被触发：

<my-el>
  <div>a</div>
  <div>b</div>
</my-el>

甚至这个

<my-el>
  <div>a</div>
</my-el>

在这些情况下， MutationObserver 会被多次触发，并且处理程序无法知道</my-el>实际何时到达结束。

问题：有谁知道div像这样包装所有内部元素是否可以解决这个问题：

<my-el>
  <div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
  </div>
</my-el>

或者换句话说，当变异观察者为这个结构触发时，我能否可靠地假设包装子 div 完全可用，包括它的所有后代节点？

我有一个多维数组，categories并且正在使用menuToElement函数遍历该数组。

它接受al array及其子元素的元素，并以形式返回ul。该代码可以正常工作，但是我不知道如何遍历数组的一个元素及其所有子元素。

我想做的是例如仅循环引擎元素及其所有子元素和所有子元素数组。我的问题是：for...of使用我正在使用的循环甚至可能做到这一点，因为我尝试遍历类别索引并且它说这是不可迭代的。

function menuToElement(menu) {
  const ul = document.createElement("ul");
  for (const item of menu) {
    const li = document.createElement("li");
    if (Object(item) === item) {
      li.textContent = item.text + ' \u25BD';
      li.appendChild(menuToElement(item.children));
    } else {
      li.textContent = item;
    }
    ul.appendChild(li);
  }
  return ul;
}

var categories = [{
  text: "engine",
  children: [1, 2, 3, {
    text: "piston",
    children: [4, 5, 6, {
      text: "piston",
      children: [4, 5, 6]
    }] …

我正在为我的按钮图标设置一个简单的动画.在将鼠标悬停在按钮上时,按钮中的图像应该从0.25不透明度默认值变为1.适用于chrome/edge,但firefox似乎忽略它(:悬停).

第一个猜测是firefox以某种方式不支持不透明度.它确实如此,因为图像的默认值设置为0.25不透明度.什么都不需要任何前缀.此外,光标根本不会改变.然后想想也许是:悬停,但自石器时代以来应该100%支持.然后让我感到震惊的是,这可能是由于我使用的CSS网格2级布局设计,实际上还没有在浏览器中完全实现.我在firefox中启用了一些布局标志,但这也没有带来解决方案.无论如何制作这个样本表明它与CSS网格布局无关.我尝试使用javascript但没有帮助.我想无论如何这都是一种不好的做法.我最后的尝试是尝试增加特异性 - 这里也没有运气,如图所示.

button {
  padding: 20px 40px;
}

.images {
  opacity: 0.25;
}

.images:hover {
  opacity: 1;
  cursor: pointer;
}

<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>

我希望悬停在上方会增加图像的不透明度,并将光标更改为指针.如有任何反馈,我将不胜感激.

考虑一个使用 shadow DOM 的非常简单的自定义元素：

customElements.define('shadow-element', class ShadowElement extends HTMLElement {
  constructor() {
    super();
    this.styleTag = document.createElement('style');
    this.styleTag.textContent= `
.root::before { 
  content: "root here!"; 
  color: green; 
}
    `
    this.shadow = this.attachShadow({mode: 'closed'});
    this.root = null;
  }
  
  connectedCallback() {
    this.root = document.createElement('div');
    this.root.className = 'root';
    this.shadow.append(this.root, this.styleTag);
  }
})

<shadow-element></shadow-element>

为了将 CSS 放入 shadow DOM，我创建了一个style标签，并将其附加到 shadow root 中。到目前为止，这一切都很好。

现在对于更复杂的 CSS，我想shadow-element.css在与 .css 文件位于同一文件夹中的文件中编写它shadow-element.js。除了关注点的分离， 我还需要 IDE 语法突出显示和 CSS 创作的完成，所以我真的希望将 CSS 放在一个单独的专用文件中。

我想将该 CSS 文件的内容导入到 Javascript 变量中，例如

import …

鉴于以下代码，我如何正确记录使用最新的 JSDoc？

function docMe([foo, bar = null, baz = 1]) { 
  /* */ 
}

我试过这个：

/**
 * @param {Array} options Array containing the options.
 * @param {HTMLElement} options[0].foo An HTML element.
 * @param {Object} [options[1].bar] An object.
 * @param {Number} [options[2].baz] A number.
 */

显然这是行不通的，JSDoc 文档提到的只是如何记录解构的对象参数，而不是解构的数组参数。