操纵滚动条
// 滚动条滚动到相应的坐标位置，返回值为undefined
window.scroll(x, y);
window.scrollTo(x, y);
// 每次滚动相应的距离
window.scrollBy(x, y);
操作伪元素
操作伪元素：最好方式是加类
<!DOCTYPE
html >
< html
lang = "en" >
< head >
< meta
charset = "UTF-8" >
< title > Title < /title>
</head>
<style>
.box {
width: 100px;
height: 100px;
padding: 10px;
background-color: green;
}
.box::after {
content: '';
display: block;
width: 50px;
height: 50px;
background-color: red;
}
.box.active::after {
background -color: black;
}
</style>
<body>
<div class="box"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.onclick = function () {
this.className += ' active';//这里要有一个空格
}
</script>
</body>
</html>
添加样式的写法(企业级写法):
<style>
.box {
width: 100px;
height: 100px;
padding: 10px;
background-color: green;
}
.box.active {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
</style>
<div class="box"></div>
var div = document.getElementsByTagName('div')[0];
div.onclick = function () {
// this.style.backgroundColor = 'red';
// this.style.width = '200px';
// this.style.height = '200px';
// this.style.borderRadius = '50%';
//上面这种写法不行,按照下面来写
this.className += ' active';
}
原文始发于微信公众号（迪哥讲事）：JS基本功系列-操作伪元素以及滚动条记录
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论