作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在这里制作一个网站,主页上有圆形 div。现在,我已将 javascript 设置为缩小它们的大小,并在窗口宽度低于 743 像素时重新定位它们。我还希望将 div 的内容替换为简单的标题。使用innerHtml 不起作用。当窗口大小低于 743 时,div 会缩小,但第一个 div 的内容仍保留在那里。
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Portfolio.css"/>
<script type="text/javascript" src="Portfolio.js"></script>
</head>
<body>
<div class="menuIcon" id="menuIcon">
<div class="menuIcon1"></div>
<div class="menuIcon2"></div>
<div class="menuIcon3"></div>
</div>
<div class="circleBase type1" id="circle1">
<h2>About me</h2>
<div class="circleBase insideText" id="insideText">
<p class="circleP" id="circleP">
<!--info about me here
<br/>Welcome to my world.</p>-->
</div>
</div>
<div class="circleBase type2" id="circle2">
<h2> Projects </h2>
<div class="circleBase screenshots" id="screenshots">
</div>
</div>
<div id="menu" class="sideMenu">
<img src="xIcon.png" alt="xIcon" class="xIcon" id="xIcon"/>
<li class="li"><a href="#">Home</a></li>
<li class="li"><a href="#">Contact</a></li>
<li class="li"><a href="#">About</a></li>
</div>
<div class="header">
<h1 class="headerP" id="header">
My Portfolio
</h1>
</div>
</body>
</html>
这是我的 JavaScript:
var g = {};
function openMenu()
{
g.menuBar.style.width = "100%";
}
function closeMenu()
{
g.menuBar.style.width = "0%";
}
function changeSize()
{
if(window.innerWidth <= 743)
{
g.circle1.innerHtml = '<h2>About Me</h2>';
g.circle1.style.width = "150px";
g.circle1.style.height = "150px";
g.circle1.style.marginTop = "30%";
g.circle1.style.marginLeft = "5%";
g.circle2.innerHtml = "";
g.circle2.style.width = "150px";
g.circle2.style.height = "150px";
g.circle2.style.marginTop = "60%";
g.circle2.style.marginLeft = "5%";
}
else if(window.innerWidth > 743)
{
g.circle1.style.width = "400px";
g.circle1.style.height = "400px";
g.circle1.style.marginTop = "10%";
g.circle1.style.marginLeft = "5%";
g.circle2.style.width = "400px";
g.circle2.style.height = "400px";
g.circle2.style.marginTop = "25%";
g.circle2.style.marginLeft = "35%";
}
}
function init()
{
g.menuBar = document.getElementById("menu");
g.icon = document.getElementById("menuIcon");
g.xIcon = document.getElementById("xIcon");
g.xIcon.addEventListener('click', closeMenu);
g.icon.addEventListener('click', openMenu);
window.addEventListener('resize', changeSize);
g.circle1 = document.getElementById("circle1");
g.circle2 = document.getElementById("circle2");
}
window.onload = init;
最佳答案
DOM 属性是innerHTML,而不是innerHtml。
关于javascript - innerHtml 不适用于 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43671035/
我是一名优秀的程序员,十分优秀!