js笔记（脚本化CSS）

97.脚本化CSS（DOM是不能直接操作CSS的但是可以间接的控制CSS）
1.读写元素CSS属性
（1）div.style.prop：是可以读可以写的，（也只有它能写，接下来学的也写不了），也可以更改自己在代码中没写的属性的值。
（2）可读写行间样式，没有兼容性问题，碰到float这样的关键字属性，前面应加css
（3）eg:float — > cssFloat
（4）符合属性必须拆解，组合单词变成小驼峰式写法（像border，尽量写成borderWidth，borderColor.borderStyle等形式，但是直接写border = ....也行，但是最好别这么写）
（5）写入的值必须是字符串格式

调用div.style：系统返回CSSStyledeclaration{}（decolaration 宣示，声明）：就是把这个div能够用的css全给你展示出来了，不只是自己写的这些，并且它是个类数组，因为有索引位属性，和正常属性，而且有length属性。
返回的这个样式表是类数组，类数组本质上是个对象，是对象就可以存取属性，那么div.style.width就能够被赋值，div.style.width = "200px";那么元素的width属性就被改变成了200px，反馈到页面上就是200px；所以就间接的改变了CSS属性
还有div.style.background-color是错的，在命名变量的时候，中间的组成部分包括数字下划线，英文字母和$，其他的不行，所以js中不能是background-color，在CSS和HTML中是可以的。所以碰见这种情况，将它变为小驼峰式，即backgroundColor
div.style.backgroundColor = "pink";这样就是对的了。
在css中没写border-radius属性，也可以直接在类数组中进行更改，div.style.borderRadius = "50%"成立
例1：
<style type="text/css">
div{
width:100px;
}
</style>
<div style="height:100px;background-color:red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
//调用div.style.width没有值为""，因为width没写到行间。调用div.style.height就有值，因为height属性在行间。利用div.style.width改变也是改变到行间上，

98脚本化CSS（接97）
2.查询计算样式
（1）window.getComputedStyle(ele,null);（对于查看元素样式来说，这个方法更加准一些，因为它看的是权重，谁的权重大就怎么显示，调用这个返回的也是类数组）
例1：在控制台打印 div.getComputedStyle(ele,null);，获取当前元素所展示出的一切CSS属性的显示值，（假如通过六个选择器给一个标签添加了一个属性，那么显示的就是最终值）
例2：
<style type="text/css">
div{
width:200px!important;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
//部分代码
//window.getComputedStyle(div,null).width 结果为200px
//div.style.width 结果为100px
//页面显示也为200px
（2）计算样式只读
（3）返回的计算样式的值都是绝对值，没有相对单位
就是假如是用em表示的单位那么会被转化为绝对值也就是像素值，像素和en都是相对值，但是像素值就是计算机的绝对值。
再例如颜色red会被转换为rgb(255,0,0)返回给你
（4）IE8 及 IE8以下不兼容

99,脚本化CSS（接97）
3.查询样式
（1）ele.currentStyle（也会返回CSSStyleDeclaration）
（2）计算样式只读
（3）返回的计算样式的值不是经过转换的绝对值（获得也是权重最高的值）
这个返回的就是em就是em，red就是red
（4） IE独有的属性
（5）封装兼容性方法getStyle(obj,prop);常用,注意传入prop为字符串，返回的是字符串，像素值
var div = document.getElementsByTagName('div')[0];
function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop]; /*prop作为一个参数，一个字符串来传入所以一定要用prop*/
}
else{
return elem.currentStyle[prop];
}
}
（6）window.getComputedStyle(elem,null)中第二个参数就是可以获取伪元素的样式表
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div::after{
content:"";
width:30px;
height:30px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div style=" float:left;width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>

//打印window.getComputedStyle(div,"after").width获得伪元素的属性，也是唯一获得伪元素属性的方法
例2：通过js改变点击后小方块的颜色，原来为粉色，点击后就变为蓝色
方法1：（不常用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
.pink::after{
content:"";
width:30px;
height:30px;
background-color:pink;
display:inline-block;
}
.blue::after{
content:"";
width:30px;
height:30px;
background-color:blue;
display:inline-block;
}
</style>
</head>
<body>
<div class="pink" style=" float:left;width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.onclick = function (){
div.className = "blue";
}
</script>
</body>
</html>

方法2：（常用）通常改变状态位就像这个这样改，更改class就可以了，但是动态的就没有办法了
好处（同方法3一样）：
1.效率问题：DOM是js和html搭建的一个桥梁，改变属性的每次 . 没有直接一个.class这样效率更快
2.好维护，想加什么想改什么直接在class中改就可以，不用反复调用（不一定是class选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div{
width:100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.onclick = function (){
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "pink";

}
</script>
</body>
</html>

方法3：（常用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div{
width:100px;
height: 100px;
background-color:red;
}
.active{
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.onclick = function (){
div.className = "active";
}
</script>
</body>
</html>

假如一个大方块带着一个小方块，大方块在100px，100px的位置，小方块就设置position:absolute，没设置left和top
那么小方块还在大方块的最顶端，因为它let和top默认值不是0，而是auto，要是0的话，大方块是带不动小方块的。
例3：让一个方块自动加速移动，并且能够停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div style="height:100px;width:100px;background-color:red;position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop]; /*prop作为一个参数，一个字符串来传入所以一定要用prop*/
}
else{
return elem.currentStyle[prop];
}
}
var speed = 5; //利用speed改变移动速度
var timer = setInterval(function(){ //利用timer令它到设定位置停止
speed += speed/7;
div.style.left = parseInt(getStyle(div,'left')) + speed +"px";
div.style.top = parseInt(getStyle(div,'top')) + speed +"px";
if(parseInt(div.style.left)>600){
clearInterval(timer);
}
},1000) /*改变时间是改变移动的速度，改变left是让它变得更细，流畅度的问题*/
</script>
</body>
</html>

100.小练习：让方块移动

101.作业：轮播图
103.事件
1.交互：就自己做了什么，它反馈给你了什么效果
例1：
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){ /*div.onclick 就叫做一个可以被点击的事件，function代表一旦事件被触发后我要执行的函数，叫做反馈*/
console.log('a'); /*这个就叫整个事件触发的函数*/
}
104.如何绑定事件
1.ele.onxxx = function (event) {}把on这种绑定方式叫做句柄的绑定方式
（1）兼容性很好，但是一个元素只能绑定一个处理程序（写多了就会覆盖），不能给同一个函数绑定多次
（2）基本等同于写在HTML行间上
例1：div.onclick = function(){}这个是在div的onclick事件上绑定一个function函数,不是给div绑定什么事件，这个事件不绑定也有，而是绑定事件处理函数。
例2：div.onclick = function(){} <==><div οnclick="console.log('a');"></div>
2.ele.addEventListener(type, fn, false); -->div.addEventListener(事件类型，处理函数，flase);
（1）IE9以下不兼容（基本上就是w3c标准），可以给一个对象的一个事件绑定多个处理程序（函数）
例1：
div.addEventListener('click',function(){ 这个function是函数引用不是函数体
console.log('a');
},false);
例2：点击之后执行两个a，因为可以给一个事件绑定多个处理函数，所以它们的地址是不一样的。
div.addEventListener('click',function(){
console.log('a');
},false);
div.addEventListener('click',function(){
console.log('a');
},false);
例3：执行一个a，就是一个函数，所以就执行一遍a
div.addEventListener('click',test,false);
div.addEventListener('click',test,false);
function test(){
console.log('a');
}
例4：使用addEventListener()给每个li元素绑定一个click事件，输出它们的顺序（104页小练习，具体题见另一文档）
所以这里要注意，一旦事件（尤其是用到i了）出现在了循环里一定要考虑是否出现闭包
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var li = document.getElementsByTagName('li');
for(var i = 0; i < li.length; i++){
(function(j){
li[j].addEventListener('click',function(){
console.log(j);
},false);
}(i))
}
</script>
</body>
</html>

3.ele.attachEvent(‘on’ + type, fn); --> div.attachEvent('on' + 事件类型 , 处理函数);和div.addEventListener()差不懂，形式不同，而且功能更强大
（1）IE独有，一个事件同样可以绑定多个处理程序，而且一个对象的一个事件绑定同一个函数多次就能执行多次
备注：往下还有css3 html5 jquery webpack等等

105.事件处理程序的运行环境（重点）
1.ele.onxxx = function (event) {} 程序this指向是dom元素本身
例1：
div.onclick = function(){
console.log(this);
}
2.obj.addEventListener(type, fn, false); 程序this指向是dom元素本身
例1：
div.addEventListener('click',function(){
console.log(this);
},false);
3.obj.attachEvent(‘on’ + type, fn); 程序this指向window
例1：这里的this一定指向div，而不是window了
div.attachEvent('onclick',function(){
handle.call(div);
});
function handle(){
this.
}
4.封装兼容性的 addEvent(elem, type, handle);方法：给一个DOM对象添加一个该事件类型的处理函数，需要三个变量：对象名，事件类型（键盘，点击什么的），事件处理函数
function addEvent(elem,type,handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false)
}else if(elem.attachEvent){
elem.attachEvent('on'+type,function(){
handle.call(elem);
});
}else{
elem['on' + type]= handle;
}
}

106.解除事件处理程序：若绑定匿名函数则无法解除
1.ele.onclick = false/‘’/null;
例1：只执行一次就失效
div.onclick = function(){
console.log(this);
this.onclick = null;
}
2.ele.removeEventListener(type, fn, false);
如果想让一个函数还能被清除，只有把函数写在外面留一个引用别人能找到它
例1：利用test清除
div.addEventListener('click',test,false);
div.removeEventListener('click',test,false);
function test(){
console.log('a');
}
3.ele.detachEvent(‘on’ + type, fn);（同上的2一样）

努力努力再努力LFY

发布了53 篇原创文章 · 获赞 12 · 访问量 9926

私信关注

js笔记（脚本化CSS）

猜你喜欢