作为一个前端初学者,总是可以遇见很多人的指导,也是一种幸运8
“其实在你要实现点什么的时候,建议你先用笔写下来,写下需求,实现思路跟步骤”
1、在网页中添加一个单选框控件和一个div标签,并且通过CSS样式设置div鼠标移入到input上的时候,让div1显示,鼠标移出input的时候,让div1隐藏。保存该网页为鼠标提示框。(提示:div1显示:div1的display变成block,div1隐藏:div1的display变成none)
<style>
#div1{
width: 200px;
height: 200px;
background: #cccccc;
border: 1px solid #000000;
display: none;
}
</style>
<body>
<input type="checkbox"
"div1.style.display='block';"
"div1.style.display='none';"/>
<div id="div1">
节日快乐哦~
</div>
2、新建一个网页,命名为按钮点击变色,添加两个按钮,分别控制一个div分别变为红色或蓝色。
<script>
function skin1() {
var ol = document.getElementById('11');
ol.href = 'css1.css';
}
function skin2() {
var ol = document.getElementById('11');
ol.href = 'css2.css';
}
</script>
<body>
<input type="button" value="变红" "skin1()" />
<input type="button" value="变蓝" "skin2()" />
</body>
@charset "utf=8";
body{background: red}
input{width: 100px;height: 50px;background: yellowgreen;}
@charset "utf=8";
body{background: blue}
input{width: 100px;height: 50px;background: seashell;}
3、新建一个网页,命名为按钮点击显示隐藏.html,创建一个按钮及一个div,实现当点击按钮显示div,再点击按钮隐藏div。
<style>
#div {
width: 200px;
height: 200px;
background: #e49c9c;
border: 1px solid #000000;
display: none;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div id="div">HTML5动画设计·hls</div>
</body>
</html>
<script>
btn.addEventListener("click", function () {
var display = div.style.display;
if (display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
});
</script>
不是很明白这种代码含义:
document.getElementById
script放最下面:你放在上面的时候,下面的dom都没有生成
上次加了$(document).ready,这个意思就是等页面加载完毕再执行
参考:
如何实现JS点击按钮显示DIV,在点击按钮隐藏整个DIV?_360问答
https://wenda.so.com/q/1537122594219145?src=180
默认div隐藏,点击按钮时出现,再点击时隐藏。
http://www.cnblogs.com/wuss/p/7879613.html
总结:基础十分薄弱!!!多问!!!多练!!!多思考!!!