一、类的操作
1.1 .className
语法
dom对象.className = “类1,类2”
原来的类会被顶掉
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
}
ul li {
float: left;
background-color: #ccc;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
.box .on {
background-color: red;
}
</style>
</head>
<body>
<ul class="box">
<li class="on">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
</body>
<script>
var list = document.getElementsByClassName("box")[0].getElementsByTagName("li");
for (i = 0; i < list.length; i++) {
list[i].onmouseenter = function() {
this.className = "on";
}
list[i].onmouseleave = function() {
this.className = "";
}
}
</script>
</html>
1.2 .classList()
类似于一个对象
.classList.add()——添加类
在原来类的基础上再添加一个类
lis[0].classList.add("新添加的类")
.classList.remove()——删除类
list[0].classList.remove("需要删除的类")
.classList.toggle()——互斥方法（删除或者添加类）
dom对象.classList.toggle("类名")
你有我去掉，你没有我加上 它就是add和remove的结合体
.classList.contains()——是否包含某个类
dom对象..classList.contains("类名")
判断你是否有这个类，如果有返回true，如果没有返回false
二、样式获取
2.1 行内样式获取
dom对象.style.样式属性名
2.2 非行内样式获取
全局方法：getComputedStyle()
getComputedStyle(dom对象,null).属性名
获取dom对象的样式值
var oDiv = document.getElementById("box");
console.log(getComputedStyle(oDiv,null));//css style declaration
console.log(getComputedStyle(oDiv,null).color) //得到的是起作用的颜色
getComputedStyle(oDiv,null)
get:获取
computed:计算过
Style:样式
打印出来之后是一个对象
注意！只能用来获取，不能设置
实例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./JS和CSS交互_样式获取.css">
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" style="color: blue;">南方航空</div>
</body>
<script>
var _div = document.getElementById("box")
console.log(_div.style) //获取的是行内样式
console.log(getComputedStyle(_div, null).width); //获取内嵌式
</script>
实例2：实现动画效果
setInterval((function){
var left = parseInt(getComputedStyle(oDiv,null).marginLeft);
oDiv.style.marginLeft = left + 1 + "px";
},20);
IE专用：currentStyle
dom对象.currentStyle
currenStyle和getComputedStyle结合使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0HII7ln-1625034901633)(CSS和JS交互.assets/image-20210624103503052.png)]
三、滚动scroll系列
dom对象.scrollTop
.scrollTop()
含义：获取垂直方向滚动的距离
dom对象.scrollLeft
.scrollLeft()
含义：返回或设置匹配元素的滚动条的水平位置，滚动条的水平位置指的是从其左侧滚动过的像素数，当滚动条位于最左侧时，位置是0.
内容大小（实际内容/设置内容）
dom对象.scrollWidth
语法：
var xScrollWidth = element.scrollWidth;
//xScrollwidth的值是元素的内容宽度
含义：这个只读属性是元素内容宽度的一种度量，包括overflow溢出隐藏的内容。其的值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度（也就是不使用滚动条的时候显示多少，它就显示多少）。
这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用
element.getBoundingClientRect()在实际测试过程中，谷歌获取的
Element.scrollWidth和 IE，火狐下获取的Element.scrollWidth并不相同
dom对象.scrollHeight
实际内容大小若 >= 内容区域设置的大小 dom对象.scrollHeight == 实际内容大小
实际内容大小若 < 内容区域设置的大小 dom对象.scrollHeight == 内容区域设置的大小
dom对象.scrollTo(x,y)
用来设置x轴和y轴的滚动距离，直接写数值没有单位（单位默认为px）
t/scrollWidth)
dom对象.scrollHeight
实际内容大小若 >= 内容区域设置的大小 dom对象.scrollHeight == 实际内容大小
实际内容大小若 < 内容区域设置的大小 dom对象.scrollHeight == 内容区域设置的大小
dom对象.scrollTo(x,y)
用来设置x轴和y轴的滚动距离，直接写数值没有单位（单位默认为px）
扫一扫
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
