小编Has*_*ash的帖子

为什么背景颜色不能用于内联网格

我创建了两个div; 一个display:inline-grid有财产,另一个display:grid有财产.我想将背景颜色应用于两个div的子元素,但具有display:inline-grid属性的div 不会对其元素着色.

HTML和CSS代码

#inline {
  display: inline-grid;
}

#block {
  display: grid;
}

div div {
  height: 50px;
}

div div:nth-child(1n) {
  background-color: green;
}

div div:nth-child(2n) {
  background-color: rebeccapurple;
}

div div:nth-child(3n) {
  background-color: aquamarine;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div id="inline">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="block">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

输出是: 在此输入图像描述

如何为内联网格div中的div设置颜色?

html css css3 css-grid

6
推荐指数
2
解决办法
162
查看次数

如何在 Bootstrap 4 中使下拉菜单的宽度等于其父菜单的宽度

我正在 bootstrap 4 中创建一个下拉菜单。我将下拉切换按钮下拉菜单放置在class="container" 的 div 元素中,我希望下拉切换和下拉菜单占据其父元素的全宽。我为此编写了这段代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown">
      dropdown
    </button>
    <div class="dropdown-menu">
      <a href="" class="dropdown-item">one</a>
      <a href="" class="dropdown-item">two</a>
      <a href="" class="dropdown-item">three</a>
      <a href="" class="dropdown-item">four</a>
    </div>
</div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
Run Code Online (Sandbox Code Playgroud)

下拉切换按钮占据其父 div 的整个宽度。但是,当我单击下拉切换按钮时,我发现下拉菜单没有占据全宽。我希望下拉菜单的宽度等于它的父宽度,我该怎么做?(我尝试使用 width:inherit; 属性,但效果不佳)

html css bootstrap-4

6
推荐指数
2
解决办法
6461
查看次数

addeventlistener 不能使用按钮多次工作

事件仅在第一次单击按钮时触发。

<button id="b">huerig</button>
<script>
  y = function(evt) {
    document.body.innerHTML += evt.type;
  }
  b = document.querySelector("#b");
  b.addEventListener("click", y);
</script>
Run Code Online (Sandbox Code Playgroud)

javascript event-listener addeventlistener

4
推荐指数
1
解决办法
1278
查看次数

为什么html元素的innerText属性只显示body元素的innerText?

console.log(document.getElementsByTagName('html')['0'].textContent);
console.log(document.getElementsByTagName('html')['0'].innerText);
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <p>innnerHtml of paragraph</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

textContent属性打印html元素中除标签之外的所有文本内容.它还可以打印所有空白区域和新线条.因此,为了获得没有空格和新行的文本,我使用了innerText属性,但它没有在title元素中打印文本,只是在p元素中打印了文本.为什么innerText属性不像我预期的那样工作?

html javascript ecmascript-5 ecmascript-6

4
推荐指数
1
解决办法
189
查看次数

为什么JS标签在不与循环一起使用时不起作用

我在这里写了一个小JS代码.哪个运行没有任何错误

repeat:
  while(true){
    console.log('Start');
    break repeat;
    console.log('End');
  }
Run Code Online (Sandbox Code Playgroud)

但是当我不使用while语句时,程序会抛出错误 Undefined label repeat

repeat:
    console.log('Start');
    break repeat;
    console.log('End');
Run Code Online (Sandbox Code Playgroud)

为什么程序会抛出该错误?标签只用于循环吗?

html javascript ecmascript-5 ecmascript-6

1
推荐指数
1
解决办法
35
查看次数