dom对象常用属性
classList与dataset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.container{
width: 300px;
height: 300px;
border: 1px solid #FF0;
}
.red{
color: red;
}
.import{
font-weight: bold;
}
</style>
<body>
<a href="links_1" data-index=1>links_1</a>
<a href="links_2" data-index=2>links_2</a>
<a href="links_3" data-index=3>links_3</a>
<ul id="ul_1" class="container red" data-index=1>
<li>test_1</li>
<!--注释节点<li>test_1</li>-->
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
</ul>
<script type="text/javascript">
/*元素的属性都可以通过element属性名访问与修改
比如a,href,div,id
class 属性需用className
style中的样式属性需要转换成驼峰写法,比如background-color,需转换为backgroundColor
*/
links = document.links
links[0].href = "http://www.baidu.com"
links[1].innerHTML = "<b>hello world</b>"
ul = document.getElementById("ul_1")
ul.className = "container"
// 修改样式
ul.style.backgroundColor = "#efefef"
/*
ul.style.position = "absolute"
ul.style.left = "50px"
ul.style.top = "50px"
*/
// innerHTML节点的html文本
// outnerHTML包含自身的html文本
console.log(ul.innerHTML)
console.log(ul.outerHTML)
// classList
/*
利用className修改包含多个类样式时不太方便，h5中提供了classList属性
该属性包含以下方法：
add(className):添加一个新的样式名
contains(className):查询是否包含某个样式名，包含则返回true;否则返回false
remove(className):删除某个样式名
toggle(className):如果有这个样式则移除；没有则添加
*/
ul.classList.add("red")
ul.classList.add("import")
console.log(ul.classList.contains("red"))
ul.classList.remove("red")
ul.classList.toggle("red")
ul.classList.toggle("red")
/* h5页面可以通过"data-"开通的属性名添加自定义属性
然后通过dataset属性访问
比如<a href="" data-index="1"></a>
通过a.dataset.index可以访问data-index属性
*/
links =document.links
console.log(links[1].dataset.index)
</script>
</body>
</h
tml>
元素大小
- offsetHeight:元素在垂直方向上占用的空间大小
- offsetWidth:元素在水平方向上占用的空间大小
- offsetLeft:元素在左边框距离包含元素的左内边框距离
- offsetTop:元素在顶边框距离包含元素的上边框内边距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
}
.container{
position: absolute;
/* left: 100px;
top: 100px;
*/
margin:15px 25px 30px 20px;
padding: 100px;
width: 100px;
height: 100px;
border: 10px solid #ff0;
overflow: auto;
/* overflow: hidden; */
}
.box{
position: absolute;
width: 500px;
height: 500px;
border: 2px solid #ff0000;
background: url(../../myhtml/001.jpg);
}
</style>
<body>
<div class="container">
<div class="box">
</div>
</div>
<script type="text/javascript">
/*
元素大小：
offsetHeight:元素在垂直方向上占用的空间大小
offsetWidth:元素在水平方向上占用的空间大小
offsetLeft:元素在左边框距离包含元素的左内边框距离
offsetTop:元素在顶边框距离包含元素的上边框内边距离
*/
container = document.querySelector(".container")
box = document.querySelector(".box")
console.log("container.offsetHeight=>",container.offsetHeight)
console.log("container.offsetWidth=>",container.offsetWidth)
console.log("container.offsetLeft=>",container.offsetLeft)
console.log("container.offsetTop=>",container.offsetTop)
console.log("container.clientHeight=>",container.clientHeight)
console.log("container.clientWidth=>",container.clientWidth)
console.log(box.offsetHeight)
console.log(box.clientWidth)
console.log(box.offsetLeft)
console.log(box.offsetTop)
// 通过js修改位置
// container.style.left = "50px"
// container.style.top = "50px"
/*
scrollHeigth:没有滚动条时的高度，即页面部分实际高度
scrollWidth:没有滚动条时的高度,即部分内容实际高度,
scrollLeft:被隐藏部分的像素数,修改此值可以改变横向滚动条位置,
scrollTop:被隐藏在上方的像素数,修改此值改变垂直方向滚动条位置
*/
console.log(container.scrollHeigth)
console.log(container.scrollWidth)
console.log(container.scrollLeft)
console.log(container.scrollTop)
// 脚本控制滚动条
// container.scronllTop = 200
function scroll(){
container.scrollTop += 15
container.scrollLeft += 15
setTimeout(scroll,1000)
}
scroll()
</script>
</body>
</html>
![]()
浙公网安备 33010602011771号