标签：边框 pre .com 完成 ons style java cti order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数</title>
<script>
//入口函数，回调函数：当窗口加载完成之后，才调用此方法.
//window.onload:1.文档 2.图片加载。
// 1.覆盖现象 2.必须等待着图片加载完成才调用此回调函数。
// window.onload = function(){
// console.log(document.getElementById("box"));
// };
// 文档加载
document.onload = function(){};
</script>
</head>
<body>
<div id="box">aaa</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
<style>
*{
margin:0;
padding:0;
}
.box1{
display:block;
width:100px;
height:100px;
background:red;
text-align:center;
line-height: 100px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<!-- <a id="box" class="box1" href="https://www.baidu.com/">X</a> -->
<a id="box" class="box1" href="#">X</a>
<!-- <a id="box" class="box1" href="javascript:">X</a> -->
</body>
<script>
var oClose = document.getElementById("box");
box.onclick = function(event){
// 只要有事件就会有事件，阻止a标签的默认事件。
// event.preventDefault();
this.className += ‘ hide‘;
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
</body>
<script>
// oDiv.innerHTML = ‘<ul><li>哈哈哈</li></ul>‘;
oDiv = document.getElementsByTagName("div")[0];
var name = ‘alex‘;
// 模板字符串 tab键上面反引号 插入变量名${变量名}
oDiv.innerHTML = `<ul>
<li>${name}</li>
</ul>`;
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: absolute;
border: 30px solid red;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
background:pink;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
<script type="text/javascript">
/*
* clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
* clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
*
*/
var oBox = document.getElementsByClassName(‘box‘)[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
</script>
</html>
0
标签：边框 pre .com 完成 ons style java cti order
原文地址：https://www.cnblogs.com/c-x-m/p/9501489.html
