虚心请教，谢谢！
鲜花牛奶
2017-08-11 22:16
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的破坏性</title>
<style>
.box {
padding: 10px;
background-color: #f0f0f0;
}
input {
position: absolute; top: 234px;
width: 160px; height: 32px;
font-size: 100%;
}
</style>
</head>
<body>
<div class="box"><img id="image" src="http://img.mukewang.com/54447b06000171a002560191.jpg" width="256" height="191"></div>
<input id="button" type="button" value="图片absolute化">
<script>
var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");
if (eleImg != null && eleBtn != null) {//为啥要加图像和按钮都不为空的条件，这两对象ID不变，通过ID获得的对象一直都有，难道有为空的情况吗？为空又是什么意思？
eleBtn.onclick = function() {
if (this.absolute) {
eleImg.style.position = "";
this.value = "图片absolute化";
this.absolute = false;//点击后this.absolute只在if条件中判断一次，条件为真就执行这块代码，假就执行else语句。第一次点击按钮时执行到这步，this.absolute = false,必须接着执行else语句才能实现图片absolute化的效果，不就相当于又判断了一次this.absolute吗？总之，图片第一次absolute化得点击两次。/？
} else {
eleImg.style.position = "absolute";
this.value = "图片去absolute";
this.absolute = true;
}
};
}
</script>
</body>
</html>
4回答
-
- nice编程
- 2017-08-14 17:53:38
按钮的内容和实际要操作DOM是相反的,意思是当按钮显示的是图片去absoloute化,其实DOM内容已经是absolute了.不知道这样说会不会好一点.if判断语句的意思是,当图片已经进行过定位,老师的那种写法(this.ansolute)==(this.absolute==true)==>poistion:absolute是有值的(这个是图片的)这种状态,就修改按钮的显示样式this.value,然后当你点击之后得把下次要判断的值修改了this.absolute,他是不会自动修改的
-
- nice编程
- 2017-08-14 16:16:26
你看不到背景颜色的变化么,当你点击了之后,图片absolute话,外在表现就是父元素高度塌陷,背景颜色变少了.你仔细去看看好么.图片absolute化并不是图片不在了,而是脱离了文档流而已
-
- nice编程
- 2017-08-14 15:06:49
我点击一次就可以啊...-_-~!
-
- nice编程
- 2017-08-11 23:21:06
根据我的个人理解:
第一个问题是:浏览器的渲染机制问题,当js的文件的加载会阻止dom的加载，也就是说当代码执行完毕时，代码会按照从上往下的顺序执行，在执行到JS脚本文件时，有可能CSS和HTML文件没有全部渲染完毕，在网络情况不好的情况下，效果更明显，如果图片都没有加载完，那么这段脚本文件就没有执行的意义了.如果想让所有文件加载完毕，可以使用很多种方法解决,例如
window.onload=function(){老师的JS代码}。。可以自行百度，这种代码在JS中的特性也称健壮性的JS
第二个问题：首先我们要有两个问题要弄明白,一:if/elseif/else语句只能有一个结果，当这个结果一旦选中入口this.absolute时就不可能在执行else语句了.
第二，老师那一句 this.absolute = false是修改了状态，但是if这条分支结构的结果已经执行完了，下面的语句并不会因为你修改了此状态进行连续的触发. 要知道触发的是单机事件，只有单击事件被触发了才能再次去判定this.absolute的状态，所以不存在连续触发的情况。
CSS深入理解之absolute
51957 学习 · 254 问题
相似问题