时间戳

首页 > 解决方案 > Div 的 css 样式现在在其中包含 javascript 时显示

javascript - Div 的 css 样式现在在其中包含 javascript 时显示

问题描述

我有一个非常简单的页面（现在用于练习）。我有一个带有红色边框和蓝色背景的 div。div 内部是一个调用外部 js 文件的标签。js 正在工作，但是 div 的边框消失了。

这是代码。

var myArray = [
  "Item one",
  "Item two",
  "Item three"
];

var randomItemOne = myArray[Math.floor(Math.random() * myArray.length)];

document.body.innerHTML = randomItemOne;
.box1 {
  border: solid 2px red;
  width: 200px;
  height: 150px;
  background-color: skyblue;
}
HTML

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Random Text Selector</title>
  <meta name="description" content="The HTML5 Herald">
  <link rel="stylesheet" href="rt_style.css">


</head>

<body>
  <div class="box1">
    <script src="js/random.js"></script>
  </div>

</body>

</html>

标签： javascriptcss

解决方案

var myArray = [
  "Item one",
  "Item two",
  "Item three"
];

var randomItemOne = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementsByClassName("box1")[0].innerText = randomItemOne;
.box1 {
  border: solid 2px red;
  width: 200px;
  height: 150px;
  background-color: skyblue;
}
HTML

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Random Text Selector</title>
  <meta name="description" content="The HTML5 Herald">
  <link rel="stylesheet" href="rt_style.css">


</head>

<body>
  <div class="box1">
    <script src="js/random.js"></script>
  </div>

</body>

</html>

我认为这就是您要实现的目标。如果我错了请纠正我

推荐阅读