DOM编程和JS书写中的一些报错

最新推荐文章于 2024-08-20 18:02:16 发布

巴黎の梦

最新推荐文章于 2024-08-20 18:02:16 发布

阅读量1.8k

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_71073278/article/details/124972188

版权

本文探讨了DOM编程中的一些常见问题，包括获取元素CSS、元素位置、滚动距离、图片懒加载和事件处理。在JavaScript中，特别提到了错误类型如Uncaught SyntaxError、Uncaught ReferenceError和Uncaught TypeError，以及如何处理这些问题，例如解决未定义的变量、函数和对象属性。同时，还介绍了事件绑定、解绑和事件传递的概念。

摘要由CSDN通过智能技术生成

1.获取元素的css：

获取标签的高:

<body>
<p class="myp">一个段落<br>一个段落<br>一个段落<br>一个段落<br>一个段落<br>一个段落<br>
一个段落<br>一个段落一个段落一个段落一个段落<br>一个段落一个段落
一个段落一个段落<br>一个段落<br>一个段落<br>一个段落</p>
<script type="text/javascript">
var myp = document.querySelector(".myp");
alert(myp.style.height);//只能获取行内样式的高度
var h = document.defaultView.getComputedStyle(myp,null).height;
alert(h);
</script>
</body>

元素的宽与高：

<script type="text/javascript">
var myp = document.querySelector(".myp");
console.log("content+padding",myp.clientHeight);


console.log("content+padding+border",myp.offsetHeight);


console.log("content+padding+滚动距离",myp.scrollHeight);


console.log("clientWidth:内容+padding+工具条",myp.clientWidth);



console.log("offsetWidth:内容+padding+边框",myp.offsetWidth);


console.log("scrollWidth:内容+padding-工具条+滚动距离",myp.scrollWidth);
</scrtipt>

document文档；default默认View视图。get获取Computed计算Style样式

回到顶部：

//获取回到顶部元素
var topel = document.querySelector(".top");
//目标监听浏览器滚动事件，当距离超过200px。显示top
window.onscroll = function(){
    //获取滚动距离
    var top = document.documentElement.scrollTop;
				
	if(top>200){//如果滚动距离大于200
		topel.style.display = "block";//显示回到顶部
		}else{
			topel.style.display = "none";
		}
	}



点击回顶
topel.onclick = function(){
	//1秒  setInterval执行33次 t等于每次滚动的距离=需要滚动的总距离/33
	var t = document.documentElement.scrollTop/33;
	var id = setInterval(function(){
		document.documentElement.scrollTop-=t;
		if(document.documentElement.scrollTop<=0){
			clearInterval(id);
		}
	},30)
}

吸顶效果

//吸顶效果
var nav = document.querySelector(".top");//获取nav
var header = document.querySelector(".header");//获取到header节点
//给window添加滚动事件，如果滚动的高度打野header的高度，
//让.nav position属性改变fixed 否则改变static
//添加窗口滚动事件
window.addEventListener("scroll",function(){
	//如果滚动距离打野header的高
	if(document.documentElement.scrollTop>