Question

我不知道为什么这段代码无效！

html，css，javascript无法在同一个html页面中使用

plz帮助我无法弄清楚这个..是浏览器问题还是我的代码错了一切似乎都很好......

function render() {
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    alert('hello');
    var overlay = document.getElementsByClassName('overlay');
    var alert = document.getElementsByClassName('alertbox');
    overlay.style.display = 'block';
    overlay.style.background = 'blue';
    overlay.style.height = winH + 'px';
    overlay.style.width = winW + 'px';
    overlay.style.border = '10px solid black';
				
}

.overlay{
    display: none;
    opacity: 0.8;
    position: fixed;
    background: #ccc;
    z-index: 10;
    width: 100%;
    height:100%;
}

.alertbox{
    display: none;
    position: fixed;
    background: magenta;
    z-index: 10;	
    border-radius: 8px;
    width: 500px;
}

<html>
<head>
	<title></title>
</head>
<body>	
	<h3>Custom Alert Box Demo</h3>
<button type="button" onclick="alert('hello world')">render overlay</button>
<button type="button" onclick="render()">render overlay</button>

<div class="overlay"></div>
<div class="alertbox">
	<div class="head"></div>
	<div class="body"></div>
	<div class="foot"></div>
</div>
</body>
</html>

Answer 1

请参阅此fiddle

您的脚本有两个错误。请用下面给出的脚本替换你的脚本

function render() {
  var winW = window.innerWidth;
  var winH = window.innerHeight;
  var overlay = document.getElementsByClassName('overlay')[0];
  var alert = document.getElementsByClassName('alertbox')[0];
  overlay.style.display = 'block';
  overlay.style.background = 'blue';
  overlay.style.height = winH + 'px';
  overlay.style.width = winW + 'px';
  overlay.style.border = '10px solid black';
}

首先出现错误，

alert('hello');

因为您的脚本中有一个名为alert的变量，因此您的控制台中会出现错误alert is not a function。如果您希望显示警报，则应将名称为alert的变量重命名为其他名称，例如，可将其重命名为alert1。请参阅fiddle。

第二个错误在行

var overlay = document.getElementsByClassName('overlay');

因为document.getElementsByClassName()总是返回一个数组。

根据docs

getElementsByClassName()返回具有全部子元素的所有子元素的类数组对象给定的类名。当调用文档对象时，搜索完整文档，包括根节点。你也可以在任何元素上调用getElementsByClassName（）;它只会返回作为指定根元素的后代的元素给出类名。

我在小提琴中所做的是，我使用索引位置overlay选择了具有类名0的第一个元素。类似于班级alertbox。

javascript没有呈现样式

1 个答案:

请参阅此fiddle